一、结构伪类
结构伪类是 CSS3
新设计的选择器,我们在前面的 HTML 表格中也是用到了结构伪类作为选择器来选择列表中的一些项,使用结构伪类我们就不用再去给列表中的项去单独添加 class
属性了。
结构伪类
利用文档结构树实现元素过滤,通过文档结构的相互关系来匹配特定的元素,从而减少文档内class
属性和 id
属性的定义,使得文档更加简洁。
结构伪类有很多种形式,并且用法是固定的,但可以灵活使用,以便设计各种特殊样式效果。常见的结构伪类有:
:nth-child()
:选择某个元素的一个或多个特定的子元素:nth-last-child()
:选择某个元素的一个或多个特定的子元素,从这个元素的最后一个字元素开始计算:nth-of-type()
:选择指定的元素:nth-last-of-type()
:选择指定的元素,从元素的最后一个开始计算
二、结构伪类 - :nth-child
:nth-child()
选择器可以选择父元素中的一个或者多个子元素,该选择器需要传入一个参数。
创建 HTML 页面,包含一个 ul>li
的列表,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下:
如何让列表元素1
的字体颜色变为红色?
我们可以给列表元素1单独添加一个 class
,再使用 class
选择器选中第一个元素然后进行样式的修改,这种方式在之前的文章中使用较多。
还有第二种方法,就是使用结构伪类 :nth-child(1)
,在上述页面中添加如下 CSS 代码:
ul li:nth-child(1) {
color: red;
}
刷新页面,效果如下:
刚才的场景是 ul
中的子元素全部都是 li
,如果混入一个其他的元素,比如 span
,在选择元素的时候会把 span
也计算在内吗?
创建一个 HTML 页面,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(4) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<span>span元素</span>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下:
第四个元素不是 li,所有样式没有任何的变化,如果我们选择第五个元素呢?修改 :nth-child()
选择器中的元素的索引为 5,具体代码如下:
ul li:nth-child(5) {
color: red;
}
刷新页面,效果如下:
样式发生了变化,因此 :nth-child()
结构伪类在计数时会统计所有的子元素,即不是 li 的元素也会被计数,将第五个是 li 的元素样式变成红色。
:nth-child()
结构伪类有如下常用形式:
:nth-child(1)
表示父元素中的第一个子元素:nth-child(2n)
表示父元素中的第偶数个子元素,与:nth-child(even)
表示的含义相同;n 表示任意正整数和0:nth-child(2n+1)
表示父元素中的第奇数个子元素,与:nth-child(odd)
表示的含义相同;n 表示任意正整数和0:nth-child(-n+2)
表示前两个子元素
其中 n 为 0,1,2,3,… 的正整数,n 有点类似列表在进行切片时的步长。
创建 HTML 页面,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(2n) {
color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下:
可以看到 :nth-child(2n)
是可以选中索引为偶数的元素(索引从1开始),第2、4 项都被选中。
修改伪类中的参数为 2n+1
,具体代码如下:
ul li:nth-child(2n+1) {
font-weight: bold;
}
刷新页面,效果如下:
索引(从1开始)为奇数的项都被选中。
n 表示正整数,从 0 开始,n 可以作为获取元素的步长,选择器的参数为 3n+1,具体代码如下:
ul li:nth-child(3n+1) {
font-weight: bold;
}
刷新页面,效果如下:
从第一个开始,每隔 3 个选项会设置指定的样式。
n 后面的数字可以看做起点,因为 n 是从 0 开始取值的,设置伪类的参数为 3n+4
,具体代码如下:
ul li:nth-child(3n+4) {
font-weight: bold;
}
刷新页面,效果如下:
可以看到样式的设置是从第4个元素开始的。
当然也可以在 n 前面添加一个符号 -
,表示只设置前几个,设置如下 CSS 样式:
ul li:nth-child(-n+4) {
font-weight: bold;
}
刷新页面,效果如下:
可以看到之后前4个元素被选中了。
二、结构伪类 - :nth-last-child()
:nth-last-child()
语法与 :nth-child()
类似,不同点是 :nth-last-child()
是从最后一个元素往前开始计数的。
:nth-last-child(1)
代表最后一个子元素,:nth-last-child(-n + 2)
代表最后2个子元素。
创建 HTML 页面,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*倒数最后一个*/
ul li:nth-last-child(1) {
font-size: large;
}
/*倒数前两个*/
ul li:nth-last-child(-n + 2) {
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
<li>列表元素6</li>
<li>列表元素7</li>
<li>列表元素8</li>
<li>列表元素9</li>
</ul>
</body>
</html>
刷新页面,效果如下:
可以看到使用 :nth-last-child()
伪类选择元素的时候是从后往前开始选择的。