css3伪类选择器
CSS3.0 结构性伪类选择器
:root 选择器
此选择器将绑定到页面的根元素中，所谓根元素，是指文档树中最顶层的元素，也就是部分。
:not选择器
如果想对某个结构元素使用样式，但是又想排除这个个元素下面的某个子元素，让它不使用此样式，可以使用它，看例子：
前端开发网(https://www.360docs.net/doc/613328430.html,)
web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
:empty选择器
当元素内容为空白的时候，使用其所定义的样式，案例如下：
:target选择器
使用其选择器来对页面中的target元素（该元素的ID被当作页面中的超链接）指定的样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用，案例如下：
第一个：前端开发网(https://www.360docs.net/doc/613328430.html,)
web前端开发起飞区，We
b前端开发高手聚集地，教程、资源完全免费！
第二个：前端开发网(https://www.360docs.net/doc/613328430.html,)
web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
第三个：前端开发网(https://www.360docs.net/doc/613328430.html,)
web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
第四个：前端开发网(https://www.360docs.net/doc/613328430.html,)
web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
:first-child选择器和:last-child选择器
之所以将这两个选择器放到一起来讲，是因为它们非常相似，前者表示单独选择某类元素的第一个元素，后者表示单独选择某类元素的最后一个元素。
- 选项一 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项二 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项三 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项四 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项五 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
:nth-child选择器和:nth-last-child选择器
学会前两个结构性伪类选择器后，我们知道它们可以选择第一个和最后一个子元素，可是又有新的问题了，有的时候我是选择列表中的其中任何一个子元素该怎么办呢？
比如我想选择列表中的第二个子元素li，那么只需要li:nth-child(2){}即可，如果想要选择倒数第二个子元素li，那么只需要li:nth-last-child(2){}即可，案例如下：
- 选项一 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项二 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项三 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项四 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项五 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
:nth-child选择器和:nth-last-child选择器
隔行换色效果其实很简单，同样是根据奇偶数判断，英文里面的奇数是odd，偶数是even，所以我们只需要给这两个选择器传入odd或even就能筛选出奇数行或偶数行了。
nth-last-child同样也可以传入这两个单词，只不过是倒数元素而已，好，我们现在来看一下案例：
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项03 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项04 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项05 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项06 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项07 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项08 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项09 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项10 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
从上面的代码中，我们可以发现明明设置了奇数行和偶数行的dt，按道理来讲，应该是如下图这种运行效果才对：
这是因为，nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候，是连通父级元素中的所有子元素一起计算的，换句话说，dt:nth-child(odd)这句话的含义，并不是指“当前dl列表中的第奇数个dt子元素来计算”，而是指“当前dl列表的第奇数个子元素如果是h2子元素，那么将选择它”，那么这种计算方式与我们所“理解”的这种需求怎么计算呢？
nth-of-type选择器和nth-last-of-type选择器
这两个选择器可以避免上述的问题，CSS3在计算子元素是第奇数个还是第偶数个自元素的时候，就只针对同类型的子元素进行计算了，这两个选择器的使用方法如下所示：
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
- 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
通过前几章的学习我们已经知道，使用nth-child选择器、nth-last-child选择器、nth-of-type和nth-last-of-type选择器可以对父元素中指定索引的子元素、奇偶子元素等进行单独样式的定义，但是还有一种情况，我们使用前面所讲的内容是无法实现的，如下图：
从第1行开始算起 每隔4个（包含第4个）使用红色
从第2行开始算起 每隔4个（包含第4个）使用绿色
从第3行开始算起 每隔4个（包含第4个）使用蓝色
从第4行开始算起 每隔4个（包含第4个）使用黄色
循环使用样式：
我们同样还是使用nth-child选择器，只不过咱们这次给它的参数是表达式，咱们先来看案例，看过之后你就明白了：
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项03 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项04 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项05 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项06 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项07 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项08 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项09 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项10 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项11 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项12 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
看如下代码，我们有3个UL列表，这三个列表中分别包含1个子元素LI、2个子元素LI和多个子元素LI，现在我们要选择只有1个子元素LI的元素，该如何做呢？
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项03 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项04 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项05 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项06 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项07 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项08 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项09 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项10 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项11 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项12 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
我们
可以结合之前学习的nth-child和nth-last-child选择器并且将索引都设置为1即可，如下代码：
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项03 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项04 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项05 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项06 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项07 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项08 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项09 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项10 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项11 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项12 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
其实我们还有更简单的方法，那就是only-child选择器
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项01 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项02 | 前端开发网(W3C
https://www.360docs.net/doc/613328430.html,)!
- 选项03 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项04 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项05 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项06 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项07 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项08 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项09 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项10 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项11 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
- 选项12 | 前端开发网(https://www.360docs.net/doc/613328430.html,)!
相关主题