css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

1.兄弟选择器： ~

该选择器会选择当前元素之后的所有相邻指定元素（具有相同父元素的兄弟元素）；

.p ~ li{
  color: blue;
}

<div>
  <p class="p">我是p元素</p>
  <strong>我是strong元素</strong>
  <li>我是li元素</li> /*li元素被选中*/
</div>

 

2.相邻兄弟选择器： +

该选择器会选择当前元素相邻的第一个兄弟元素（不管指定不指定相邻兄弟元素的类型，都会选择相邻第一个元素，如果没有匹配到则不给定样式）；

.p + li {
  color: red;
}

<p class="p">我是p元素</p>
<li>我是紧邻的li元素</li> /*紧邻的li被选中；如果紧邻p元素的的不是li元素，则没有选中任何元素就无法添加指定样式*/
<strong>我是strong元素</strong>

 

3.子元素选择器： >

该选择器会选择该元素下的指定子元素（只包括子元素，除了子元素以外的后代选择器不被选择）；

.p > li {
  color: green;
}

<p class="p">
  <strong>我是strong</strong>
  <li>我是li1</li> /*被选中*/
  <li> /*被选中*/
    我是li2
    <li>我是p元素的孙子元素li</li> /*作为p元素的孙子元素，不被选中*/
  </li> 
  <span>我是span</span> 
</p>