盘点那些选择器中的坑~~

一、元素选择器和类选择器搭配使用

1、 div.demo （中间没有空格）匹配类名包含demo的所有div元素。两者是&的关系

<div class="demo">11</div>
<div>2-1<p class="demo">2-2</p></div>
<div class="demo">3-1<div>3-2</div></div>
<span class="demo">44</span>

---

2、 div .demo（中间有空格） 匹配类名包含demo的所有元素。前面的元素选择器没有产生任何效果

<div class="demo">11</div>
<div>2-1<p class="demo">2-2</p></div>
<div class="demo">3-1<div>3-2</div></div>
<span class="demo">44</span>

3、 .demo div（中间有空格） 匹配类名包含demo的元素中的所有后代div元素。二者是祖先元素与后代元素的关系

<div class="demo">11</div>
<div>2-1<p class="demo">2-2</p></div>
<div class="demo">3-1<div>3-2</div></div>
<span class="demo">44</span>

二、多个类选择器搭配使用

4、 .demo .item （中间有空格）匹配类名包含 demo 的元素中类名包含 item 的后代元素。二者是祖先元素与后代元素的关系

<div class="demo item">11</div>
<div class="demo"><p class="item">22</p></div>
<div class="item"><p class="demo">33</p></div>
<span class="item demo">44</span>

5、 .demo.item （中间没有空格）匹配类名同时含有 demo 和 item 的所有元素。两者是&的关系

<div class="demo item">11</div>
<div class="demo"><p class="item">22</p></div>
<div class="item"><p class="demo">33</p></div>
<span class="item demo">44</span>

小结：

div.demo ————————————匹配类名包含demo的所有div元素。（&）
div .demo（中间有空格） ————匹配类名包含demo的所有元素。（前面的元素选择器没有产生任何效果）
.demo div（中间有空格）————匹配类名包含demo的元素中的所有后代div元素。（祖先和后代）
.demo .item （中间有空格）———匹配类名包含 demo 的元素中类名包含 item 的后代元素。（祖先和后代）
.demo.item ——————————匹配类名同时含有 demo 和 item 的所有元素。（&）

为了方便记忆，找一下规律，可以发现，

中间没有空格的搭配，关系都是&，代表两个条件同时满足

中间有空格的搭配，类选择器在前的，关系都是祖先和后代

---

三、结构性伪类选择器

1、ul li:nth-child(n) 选择ul下的第n个子元素（不管前边是不是li，都算在内）

<ul>
    <span>11</span>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>

---

2、 ul li:nth-of-type(n) 选择ul下的第n个li元素（强调只对li标签计数）

<ul>
    <span>11</span>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>