CSS选择器基础整理

1、类型选择器（Type Selector）：

例:div会选择所有的<div>元素；

2、ID选择器（ID Selector）：

例:#text会选择id="text"的元素；

3、后代选择器（Descendant Selector）：A B，即选择所有在A内部的B。B被称为A的后代；

例：div img会选择所有在<div>中的<img>元素；

4、类选择器（Class Selector）：每个元素只能有一个ID，但可以有很多class；

例:.text会选择所有带有class="text"的元素

5、A,B：你可以通过逗号把任意选择器结合起来

6、通用选择器（The Universal Selector）：*使用通用选择器可以选择所有元素；

例*会选择所有的元素，p *会选择<p>及其内部的元素

7、相邻选择器（Adjacent Sibling Selector）：A+B即选择所有紧邻A且在A后的元素B ，A和B被称为兄弟；

8、一般兄弟姐妹选择器（General Sibling Selector）：A~B即选择所有在A后面的兄弟元素B；

9、子选择器（Child Selector）：A>B即选择A的直接子元素B。子元素是指直接嵌套在另一个元素中的元素；

10、伪类:first-child：选择第一子元素

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:first-child选的是id="P1"的<p>

11、伪类:only-child：选择在其他元素内有且仅有一个的子元素

<div>
    <p id="P1"></p>
</div>
<div>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:only-child选的是id="P1"的<p>

12、伪类:last-child：选择在其他元素内的最后一个子元素。

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:last-child选的是id="P3"的<p>

如果一个元素X是另一个元素的唯一子元素，则此时X:first-child等价于X:last-child等价于X:only-child

13、伪类:nth-child(A)：选择在其他元素内的第A个子元素

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:nth-child(2)选的是id="P2"的<p>

14、伪类:nth-last-child(A)：选择在其他元素内的倒数第A个子元素

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:nth-last-child(1)选的是id="P3"的<p>

15、伪类:first-of-type：选择在其他元素内的第一个同类型元素(与:first-child类似)

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>
<p id="P4"></p>

此时p:first-of-type选的是id="P1"和id="P4"的<p>

16、伪类:nth-of-type(A)：选择在其他元素内的有一定秩序的同类型元素(A可以是数字，也可以是even和odd，甚至是An+B)

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
    <p id="P4"></p>
    <p id="P5"></p>
</div>

此时p:nth-of-type(2)选的是id="P2"的<p>
p:nth-of-type(even)选的是id="P2"和id="P4"的<p>
p:nth-of-type(4n+1)选的是id="P1"和id="P5"的<p>

17、伪类:only-of-type：选择在其他元素内的有且只有一个的同类型元素

<div>
    <p id="P1"></p>
</div>
<div>
    <p id="P2"></p>
    <p id="P3"></p>
    <p id="P4"></p>
</div>

此时p:only-of-type选的是id="P1"的<p>

18、伪类:last-of-type：选择在其他元素内的有且只有一个的同类型元素

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
    <p id="P4"></p>
</div>

此时p:last-of-type选的是id="P4"的<p>

19、空选择器:empty：选择没有子元素的元素

<div id="D1">
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>
<div id="D2">
</div>

此时div:empty选的是id="D2"的<div>

20、否定伪类:not(X)：选择所有没有X选择器的元素

<div>
    <p id="P1"></p>
    <p id="P2"></p>
    <p id="P3"></p>
</div>

此时p:not(P1)选的是选的是id="P2"和id="P3"的<p>

21、属性选择器

未完待续