有这么一段样式:
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
如果想选择第一个li,那么就用first-child(第一个孩子)。语法:
ul li:first-child {
color: red;
}
如果想选择最后一个li,那么就用last-child(最后一个孩子)。语法:
ul li:last-child {
color: red;
}
如果想选择某一个li,那么就用nth-child(n)。nth-child(n)选择某个父元素的一个或多个特定的子元素!
- n可以为数字、关键词或公式
- n如果是数字,就是选择第n个子元素。里面的数字从1开始……
- n可以是关键字:even偶数,odd奇数
- n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
语法:
ul li:nth-child(2) {
color: red;
}
意思就是第二个li的颜色改为红色!n如果是数字就代表选中第几个。
语法:
ul li:nth-child(odd) {
color: red;
}
意思就是第一个、第三个、第五个li的颜色改为红色!(odd选全部奇数行,偶数同理)
语法:
ul li:nth-child(n) {
color: red;
}
意思就是所有li的颜色改为红色!(n代表全部)
n的公式如下:
公式 | 取值 |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5、10、15…… |
n+5 | 从第5个开始(包含第5个)到最后 |
-n+5 | 前5个(包含第5个) |
nth-child(n)与nth-of-type(n)的区别
先看下面这个例子:
<article>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</article>
当我们书写article div:nth-child(1) {color:red;}会让熊大变颜色吗?答案是不会的!原因是因为nth-child会把所有的盒子都排列序号,代码在执行的时候首先看:nth-child(第一个孩子),之后回去看前面声明的选择器(div)。意思就是说先看的是p标签,因为是第一个孩子。当nth-child执行完毕后回去看前面声明的选择器的时候,发现不是p而是div,第一个孩子与声明的选择器不符合,所有不会变颜色!
而当我们书写article div:nth-of-type(1) {color:red;}会让熊大变颜色吗?答案是会的!原因是因为nth-of-type会把指定的元素的盒子排列序号,执行的时候首先看div(指定声明的元素),之后回去看nth-of-type(1)。意思就是说先看的是声明的div,然后看在div的第几个孩子。所有会变颜色!
nth-child(1)和nth-of-type(1)的执行过程是截然相反的!
总结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面的所有孩子排序选择(序号是固定的)先找到第几个孩子,然后看看是否和E(指定的元素)匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
- 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器,权重为10
版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!
转载请注明:转载于37.2度云笔记