CSS选择器

最新推荐文章于 2024-05-27 17:57:44 发布

小奋斗♛

最新推荐文章于 2024-05-27 17:57:44 发布

阅读量547

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_72684019/article/details/125976645

版权

1、复合选择器

选择器名称	示例	示例的意义
后代选择器	`.box .spec`	选择类名为 box 的标签内部的类名为 spec 的标签
交集选择器	`li.spec`	选择既是 li 标签, 也属于 spec 类的标签
并集选择器	`ul, ol`	选择所有 ul 和 ol 标签

1.1 后代选择器

CSS 选择器中, 使用空格表示"后代"
后代选择器可以有很多空格, 隔开好几代

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.box p {
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>我是盒子中的段落</p>
			<p>我是盒子中的段落</p>
		</div>
		<p>我是段落</p>
		<p>我是段落</p>
	</body>
</html>

1.2 交集选择器

选择有.spec 类的 h3 标签, 此时应该使用交集选择器h3.spec

1.3 并集选择器

并集选择器也叫作分组选择器, 逗号表示分组

2、伪类

伪类	意义
`a:link`	没有被访问的超级链接
`a:visited`	已经被访问过的超级链接
`a:hover`	正被鼠标悬停的超级链接
`a:active`	正被激活的超级链接（按下按键但是还没有松开按键）

注意：a 标签的伪类书写, 要按照"爱恨准则"的顺序, 否则会有伪类不生效

3、元素关系选择器

名称	举例	意义
子选择器	`div>p`	div 的子标签 p
相邻兄弟选择器	`img+p`	图片后面紧跟着的段落将被选中
通用兄弟选择器	`p~span`	p 元素之后的所有同层级 span 元素

4、序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第 3 个子元素
:nth-of-type(3)	第 3 个某类型子元素
:nth-last-child(3)	倒数第 3 个子元素
:nth-last-of-type(3)	倒数第 3 个某类型子元素

补充：

举例	意义
:first-of-type()	当前同一类标签中的第一个
:last-of-type()	当前同一类标签中的最后一个
:only-child()	选择的元素是其父级的唯一子元素
:only-of-type()	选择的元素是同类标签中的唯一一个
:nth-child()	可以选择任意序号的子元素

注意：

:nth-child()可以写成 an + b 的形式, 表示从 b 开始每 a 个选一个, 注意不能写为 b + an
2n+1 等价于 odd, 表示奇数
2n 等价于 even, 表示偶数

:nth-last-child() 和 :nth-last-of-type()的区别

:nth-last-child()和:nth-last-of-type()都是倒数选择
:nth-last-child(), 以当前子集作为查找范围
:nth-last-of-type(), 以当前标签类型作为查找范围

注意：空格的重要性

5、空选择器

6、取反选择器

7、属性选择器

举例	含义
img[alt]	选择有 alt 属性的 img 标签
img[alt="故宫"]	选择 alt 属性是故宫的 img 标签
img[alt^="北京"],img[alt$="夜景"]	选择 alt 属性以北京开头的 img 标签 img[alt$="夜景"] 选择 alt 属性以夜景结尾的 img 标签
img[alt*="美"]	选择有 alt 属性中含有美字的 img 标签
img[alt~="手机拍摄"]	选择有 alt 属性中有空格隔开的"手机拍摄"字样的 img 标签
img[alt\|="参赛作品"]	选择有 alt 属性以“参赛作品-”开头的 img 标签

8、CSS3 新增伪类

伪类	含义
`:empty`	选择空标签
`:focus`	选择当前获得焦点的表单元素
`:enabled`	选择当前有效的表单元素
`:disabled`	选择当前无效的表单元素
`:checked`	选择当前已经勾选的单选按钮或者复选框
`:root`	选择根元素, 即`<html>`标签

9、伪元素

注意：伪元素用双冒号表示, IE8 可以兼容单冒号

举例	含义
::before	创建一个伪元素, 其将成为匹配选中的元素的第一个子元素, 必须设置 content 属性表示其中的内容
::after	创建一个伪元素, 其将成为匹配选中的元素的最后一个子元素, 必须设置 content 属性表示其中的内容
::selection	应用于文档中被用户高亮的部分（使用鼠标圈选的部分）
::first-letter	选中某元素中（必须是块级元素）第一行的第一个字母
::first-line	选中某元素中（必须是块级元素）第一行全部文字

说明：::before是指在a标签的前面设置，::after则是在之后设置。