CSS选择器详解：从基础到CSS3新特性-优快云博客

本文链接：https://blog.youkuaiyun.com/twjtwjtwjm/article/details/127129616

CSS选择器

该篇为CSS系列第二篇文章，着重讲解了选择器的作用，分类以及各类选择器的使用，还有CSS3新增的伪类/伪元素等等…干货满满，不容错过👻

1、选择器作用

选择器主要是用来选中我们想要选中的元素，选中后就能为该元素添加样式了；

在CSS中，选中元素的方式有很多，这些不同的方式就是不同的选择器。

2、选择器分类

CSS选择器主要分为传统 CSS2.1 选择器和 CSS3 新增选择器，如下表：

CSS2.1选择器	CSS3新增选择器
标签选择器	元素关系选择器
id选择器和class选择器	序号选择器
复合选择器	属性选择器
通配符选择器	CSS3新增伪类
伪类	伪元素
…	…

3、传统CSS2.1 选择器

3.1、标签选择器

标签选择器称之为：元素选择器，类型选择器；

直接使用元素的标签名当作选择器，将选择页面上所有该种标签，无论标签所处位置的深浅。

语法：
element { ...样式声明... }
/* 实例：*/
p { }
div { } ...
/* 作用：标签选择器的"覆盖面"非常大，通常用于标签 样式的初始化*/

3.2、id选择器

id 选择器使用HTML元素的 id 属性来选择特定元素；

元素的id在页面中是唯一的，所以id选择器用于选择一个唯一的元素。

语法：
#id{ ...样式声明... }
/* 实例：*/
#box{ }
#top{ }

3.3、class选择器

HTML元素以 class属性 来设置，CSS中class选择器以 . + class名 来定义

语法：

.class{ ...样式声明... }
/* 实例：*/
.box{ }
.item{ }

/* 延伸->原子类：
在网页项目中可以将所有常用样式都设置为单独的类，
这样HTML标签就可以"按需选择"它的样式了，这样就能够快速添加一些常见的样式，
应用场景：组件开发
*/

3.4、通配符选择器

/* *星号代表页面当中所有的元素，基本不用，对性能消耗过大 */
/* 页面当中所有元素的字体颜色为红色 */
*{ color:red }

3.5、复合选择器

选择器可以任何搭配、结合，从而形成复合选择器；但是我们必须要能一目了然的看出选择器代表的含义。

选择器名称	示例	描述
后代选择器	`.box .para`	选择类名为 box 的标签内部的类名为 para 的标签
交集选择器	`li.para`	选择既是 li 标签，也属于 para 类的标签
并集选择器	`ul,ol`	选

3.5.1、后代选择器

/* 在CSS中，使用 空格 表示"后代"（子孙）、后代选择器可以有很多空格，隔开好几代 */
element element { ...样式声明... }
/* 实例：*/
div p{ color:#fff }
div p span{ color:#fff }

3.5.2、交集选择器

<style>
	/* 如：选择有 .box 类的 h2 标签，此时应该使用 交集选择器 */
	h2.box {
		color: skyblue;
		font-size: 30px;
	}
</style>

<body>
	<h2 class="box">交集选择器</h2>
</body>

3.5.3、并集选择器

/* 并集选择器也叫作 分组选择器，逗号表示分组 */
ul,ol,p {
	font-size: 12px;
	color: red;
}

3.5.4、伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态(如：超链接访问状态，超链接拥有 4 个特殊状态)

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

爱恨准则（LOVE HATE）：

:link -> :visited -> :hover -> :active

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

4、CSS3 新增选择器

4.1、元素关系选择器

<style>
	/* 主要有：子代选择器、相邻兄弟选择器、通用兄弟选择器 */
	
	/* 子选择器 ：两个标签为 父子元素，而后代选择器并不限制是子元素 */
	.box > p {
	  color: red;
	}
	
	/* 相邻兄弟选择器：img + span 即 选择 紧跟在img后面的第一个span */
	img + span {
	  color: seagreen;
	}
	
	/* 通用兄弟选择器：h3~span选择h3元素之后所有同层级span元素 */
	h3 ~ span {
	  color: aqua;
	}
</style>

4.2、序号选择器

选择器	描述	兼容性
`:first-child`	选择第一个子元素	IE7
`:last-child`	选择最后一个子元素	IE9
`:nth-child(n)`	选择第 n 个子元素：值为 `an+b` 等价于从 b 开始每a个选择一个值为 `2n+1` 等价于 odd ，表示奇数值为 `2n` 等价于 even ，表示偶数	IE9
`:nth-of-type(n)`	选择同种标签指定序号的子元素	IE9
`:nth-last-child(n)`	选择倒数第 n 个子元素	IE9
`:nth-last-of-type(n)`	选择倒数第 n 个某类型子元素	IE9

4.3、属性选择器

案例	描述	兼容性
`img[alt]`	选择有 alt 属性的 img 标签	IE9
`img[alt="小草"]`	选择 alt 属性是 `小草` 的 img 标签	IE9
`img[alt^="小草"]`	选择 alt 属性以 `小草` 开头的 img 标签	IE9
`img[alt$="小草"]`	选择 alt 属性以 `小草` 结尾的 img 标签	IE9
`img[alt*="小草"]`	选择 alt 属性中包含 `小草` 文字的 img 标签	IE9
`img[alt~="小草"]`	选择 alt 属性中有空格隔开的 `小草` 字样的 img 标签	IE9
`img[alt∣="小草"]`	选择 alt 属性中以 `小草-` 开头的 img 标签	IE9

4.4、CSS3 新增伪类

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

4.5、CSS3 新增伪元素

CSS3 新增了 “伪元素” 特性，表示 虚拟动态创建的元素

伪元素用双冒号 :: 表示，IE8 及以上可以兼容单冒号 :

CSS3 新增伪元素	描述
`::before`	匹配选中的元素的第一个元素，必须设置content属性
`::after`	匹配选中的元素的最后一个子元素，必须设置content属性
`::selection`	匹配被用户选取的部分只能应用少量 CSS 属性：color、background、cursor 以及 outline
`::first-letter`	会选中某元素中第一行的第一个字母，必须是块级元素
`::first-line`	会选中某元素中第一行的全部文字，必须是块级元素