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

本文详细介绍了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中的常用结构性伪类选择器,如果本文档有缺漏或编辑错误的地方还请大家提出,我后续做修改,话不多说咱们开始吧!

在这里插入图片描述

选择器名称与概念

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值