选择符

后代选择符 空格（）

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

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

<div class="red">
	<div class="blue" >
		<p>1. 颜色是？ </p>
	</div>
</div>
<div class="blue">
	<div class="red">
		<p>2. 颜色是？ </p>
	</div>
</div>

.red p { color: red; }
.blue p { color: blue ; }

结果是 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

  <div class="g1">
    	<h4>使用 :first-child 实现</h4>
    	<p class="item">子项1</p>
    	<p class="item">子项2</p>
  </div>
  <div class="g2">
    	<h4>使用 兄弟选择符 实现</h4>
    	<p class="item">子项1</p>
    	<p class="item">子项2</p>
  </div>

  .g1 .item:not(:first-child) { color: skyblue; }
  .g2 .item + .item { color: skyblue };

  

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

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