css3选择器概念及写法大全——结构性伪类选择器

最新推荐文章于 2021-08-24 14:30:11 发布

最初都是小白

最新推荐文章于 2021-08-24 14:30:11 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Css 文章标签： CSS3 选择器结构伪类

本文链接：https://blog.youkuaiyun.com/Originally_M/article/details/86572574

Css 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CSS3中的11种结构性伪类选择器，包括root、not、empty、target、first-child、last-child、nth-child、nth-last-child、nth-of-type、nth-last-of-type和only-child。每种选择器都有详细的解释和示例代码，帮助读者更好地理解和应用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，今天给大家总结一些关于css3中的常用结构性伪类选择器，如果本文档有缺漏或编辑错误的地方还请大家提出，我后续做修改，话不多说咱们开始吧！

在这里插入图片描述

选择器名称与概念

序号	选择器名称	概念
1	root	匹配文档根元素，在HTML 中,根元素始终是 html 元素。
2	not	匹配非指定元素/选择器的每个元素。
3	empty	匹配没有子元素（包括文本节点）的每个元素。
4	target	匹配页面中的URL中某个标识符的目标元素，起指向，强调作用。
5	first-child	匹配一个父元素中的第一个子元素。
6	last-child	匹配一个父元素中的最后一个子元素。
7	nth-child	匹配一个父元素中的指定序号的子元素。
8	nth-last-child	匹配一个父元素中的指定序号的子元素（倒序）。
9	nth-of-type	匹配属于父元素的特定类型的第 N 个子元素。
10	nth-last-of-type	匹配属于父元素的特定类型的第 N 个子元素（倒序）。
11	only-child	匹配属于其父元素的唯一子元素的每个元素。

详情与语法

1. root 【不兼容IE8 及更早的版本】

:root 选择器匹配文档根元素。
在 HTML 中，根元素始终是 html 元素。

// 设置根元素html的背景颜色
:root { 
	background:pink;
}

2. not【不兼容IE8 及更早的版本】

如果想对某个结构元素使用样式，但是又想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

// 设置除<a>标签以外的所有元素的文字颜色
:not（a） { 
	color:pink;
}

3. empty【不兼容IE8 及更早的版本】

使用empty选择器来指定当前元素中内容为空白时使用的样式。比如，有一个表格，可以使用empty选择器来指定当表格中某个单元格内容为空时，该单元格背景为灰色。

// 设置所有空的<p>标签的背景颜色
p:empty
{ 
background:pink;
}

4. target【不兼容IE8 及更早的版本】

使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用，也就是锚链接）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

// 设置除<a>标签以外的所有元素的文字颜色
:not（a） { 
	color:pink;
}

接下来看一组实例：
小伙伴儿们可以复制以下代码到自己编辑器里查看效果哦！

<!DOCTYPE html>
<html>
<head>
<style>
 	html {
        background: lightblue;
    }
   :target {
        width: 500px;
        border: 2px solid #ccc;
        background-color: pink;
    }
</style>
</head>
<body>

    <h1>target选择器演示代码：</h1>
    <p>
        <a href="#news1">跳转至文本 1</a>
    </p>
    <p>
        <a href="#news2">跳转至文本 2</a>
    </p>
    <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚链接。</p>
    <p id="news1">
        <b>文本 1...</b>
    </p>
    <p id="news2">
        <b>文本 2...</b>
    </p>
    <p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

target 实例效果图：
在这里插入图片描述

5. first-child

所有主流浏览器都支持：first-child 选择器。
但是对于IE8 及更早版本的浏览器中使用：first-child,必须声明 <!DOCTYPE>。

示例一

选择每个 < p > 中的每个 < i > 元素并设置其样式，其中的 < p > 元素是其父元素的第一个子元素：

p:first-child i {
	background:yellow;
}

示例二

选择列表中的第一个 < li > 元素并设置其样式：

li:first-child { 
	color:pink;
}

6. last-child【不兼容IE8 及更早的版本】

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
p:last-child 等同于 p:nth-last-child(1)。

// 设置属于其父元素的最后一个子元素的 p 元素的文字颜色
p :last-child { 
	color:pink;
}

7. nth-child（）【不兼容IE8 及更早的版本】

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

// 设置属于其父元素的第二个子元素的每个 p 的背景色
p:nth-child(2) {
	background:pink;
}

8. nth-last-child（）【不兼容IE8 及更早的版本】

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。

// 设置属于其父元素的倒数第二个子元素的每个 p 的背景色
p:nth-last-child(2) {
	background:pink;
}

9. nth-of-type（）【不兼容IE8 及更早的版本】

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
n 可以是数字、关键词或公式。

// 设置属于其父元素的第二个 p 元素的每个 p：
p:nth-of-type(2) {
	background:pink;
}

10. :nth-last-of-type（）【不兼容IE8 及更早的版本】

:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。

// 设置属于其父元素的倒数第二个 p 元素的每个 p：
p:nth-last-of-type(2) {
	background:pink;
}

11. ：only-child【不兼容IE8 及更早的版本】

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

// 设置属于其父元素的唯一子元素的每个 p 元素：
p:only-child {
	background:pink;
}