CSS选择器--小结

一、基本选择器

1.选择器分类：

1）.行内选择器

使用格式：<p style="..."></p>

2）.id选择器

书写格式：#id01 {} ，使用格式：<p id="id01"></p>

3）.类class选择器

书写格式：.c01{}，使用格式：<p class="c01"></p>

4）.标签tagname 选择器

书写格式：p {}

5）.通配符*选择器

书写格式：*{}

2.选择器优先级

行内选择器 > id选择器 > class选择器 > tagname选择器 > *通配符选择器

注意：使用!important时，优先级将提升最高。

二、层次选择器

1. > 选择子代

2. 空格 选择后代

3. ~ ul a~li {} 在ul中选择所有a标签下面的所有li标签

4. + ul a+li {} 在ul中选择所有a标签中的下一个li标签

例：标签1 标签2：first-child{}

5. :first-child，仅选择第一个子标签，只有与标签2同类型才被选择

6. :last-child，仅选择最后一个子标签，只有与标签2同类型才被选择

三、结构选择器

例：标签1 标签2:first-of-type

1. :first-of-type 在所有标签1中选择与标签2同类型的,从标签2类型起第一个子标签

2. :last-of-type 在所有标签1中选择与标签2同类型的,从标签2类型起最后一个子标签

例：标签1 标签2:nth-of-type(3) {}

3. :nth-of-type(3) {} 在所有的标签1中选择与标签2同类型的，从标签2类型起第3个子标签不选

例：标签1 标签2:not(:nth-of-type(3)) {}

4. :not(:nth-of-type(3)) {} 在所有的标签1中选择与标签2同类型的，从标签2类型起第3个子标签

例：标签1 标签2:nth-of-child(4) {}

5.:nth-child(4) {} 在所有的标签1中选择与标签2同类型的，从头起第四个子标签