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>