选择符

后代选择符 空格（）

选择某元素的所有后代元素

1. 容易混淆的点：当权重相同时，后面覆盖前面

结果是 1 和 2 都是蓝色

子选择符 箭头（>）

选择某元素的直接子元素

1. 后代选择符和子选择符的抉择

• 尽量使用后代选择符，这样更容易调整 html 结构时更为灵活
• 使用子选择符的主要目的是避免冲突

相邻兄弟选择符 加号（+）

选择某元素后面的第一个兄弟元素

1. 容易混淆的点：相邻兄弟选择符忽略文本节点和注释节点

2. 实现 :first-child 效果

• 相邻兄弟选择符只能匹配后一个元素，所以第一个元素就会落空，永远不会被匹配

  /* 除了第一个子项外，都有 margin-top */
  .item + .item {
    margin-top: 1em;
  }
  
  /* 用 :first-child 实现 */
  .item:not(:first-chilid) {
    margin-top: 1em;
  }
  

• 但相邻兄弟选择符适用性更广泛，当容器的第一个字元素不是 .item 时，兄弟选择符依然有效，但 :first-child 却无效

  因为没有任何 :first-child 是第一个子元素，无法匹配 :first-child

随后兄弟选择符 波浪号（~）

选择某元素后面所有的兄弟元素