7种CSS选择器，不同选择器的组合方式、选择器之间的优先级比较

CSS（二）选择器

CSS选择器用来指定网页中我们想要样式化的HTML元素。

一、选择器种类

选择器	示例
类型选择器	h1 { }
通配选择器	* { }
类选择器	.box { }
ID 选择器	#unique { }
标签属性选择器	a[title] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }

1.1、全局选择器

全局选择器只有一个，就是*，表示匹配所有的元素。

1.2、标签选择器

又叫「类型选择器」、「元素选择器」，就是标签名，表示选中HTML中所有该类型的标签元素。

1.3、类选择器

以.开始，后面紧接着类名。同时可以结合标签名一起使用缩小范围。示例如下：

.box{}
span.brimary{}	/* 表示指向特定元素的类 */
h1.hightlight

当多个类名，不加空格连接在一起时，表示同时具有这些类的元素

.notebox.danger{}	/* 中间不加空格，表示同时具有两个类的元素 */
.notebox .danger{}	/* 中间用空格隔开，表示类名为.notebox容器下的类名为.danger的元素。这种组合方式在第二节中会介绍*/

1.4、ID选择器

以#开头，后面紧接着元素ID。示例如下

#first-box{}

1.5、伪类选择器

「伪类」，以冒号:开头，用于选择处于特定状态的元素。示例如下：

/* 伪类和伪元素书写形式很相似。伪类中间是冒号:  而伪元素中间是双冒号 */
ul:first-child	/* 子节点伪类 */
.box:nth-child(2)
input:invalid	/* 任意内容未通过的input或form元素 */
a:hover		/* 用户行为伪类 */

「伪类」，按照功能可以划分为4类：

• 动态伪类：:focus、:hover、:visited、:active
• 状态伪类：:disable、:required、:empty
• 结构伪类：:first-child、:nth-of-type
• 其它：:target

「结构伪类」列举如下：

子节点选择器	说明
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第三个子元素
:nth-last-child(3)	倒数第三个子元素
:nth-child(odd)	所有奇数个子元素
:nth-child(even)	所有偶数个子元素
div h2:nth-of-type(even)	div 中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)
li:nth-child(4n+1)	循环样式 匹配第1，5，9…个li

详细的伪类清单：参考彻底搞懂 CSS 伪类和伪元素 - 掘金 (juejin.cn)

1.6、伪元素选择器

「伪元素」，以双冒号::开头，用于在文档中插入虚构的元素。如：

p::first-line	/*始终选中文本第一行，不管宽度如何变化*/
div::first-letter	/* div标签里第一个字符 */

常用的伪元素有：

::first-letter	选中块状元素中的首字母
::first-line	选中首行
::before	在之前创建一个不在文档树中的元素
::after	在之后创建一个不在文档树中的元素
::placeholder	选中表单元素的占位文本
::file-selector-button	选中类型为 file 的 input 里面的 button
::selection	选中被用户高亮的部分
::backdrop	选中视觉聚焦元素后面的背景元素
::marker	选中 list 的 marker

1.7、属性选择器

示例	描述
a[attr]	匹配带有一个名为attr的属性的元素——方括号里的值。
a[href="https://example.com"]	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。

二、选择器组合

选择器之间可以通过一些符号组合起来，成为一个新的选择器。

2.1、不加空格相连

当几个选择器不加空格连接在一起时，表示的是同时满足这些选择器规则的元素

.notebox.danger {}	
h1.highlight{	}

2.2、空格连接

多个选择器，用空格间隔，连接在一起的时候，表示层层递进包含的关系。

.container aside .danger {}	/* 表示类名为container的元素中 的aside标签中 类名为danger的元素 */

2.2、逗号相连

多个选择器之间用逗号,相连，表示同时选中这些选择器

div, aside, p, .box {} 	/* 表示同时选中div标签、aside标签，类名为box的标签元素 */

2.3、>相连

>表示子代选择器

article > p {}	/* 表示仅限article下一级中的p，下两级以及更下面的p不选中 */
article>p {}	/* >左右两边不加空格也可以，但是可读性差一点 */

2.4、+相连

+表示相邻兄弟选择器

article + p {}	/* 紧接着article标签的下一个同级标签，注意是同级！同级！同级！ */

2.5、~相连

~表示通用兄弟选择器

aside ~ p {}	/* aside标签后的所有同级p标签。不包含前面的同级p标签，不包含后面的不同级的p标签 */

三、优先级

CSS选择器的作用在于为指定的元素添加样式，但是当多个选择器指向同一个元素、并且样式冲突时，浏览器该如何选择呢？这就涉及到了CSS选择器「优先级」的计算。

3.1、简单的优先级比较

优先级：内联样式 > ID选择器 > 类选择器 > 标签选择器（一个原则：越具体的优先级越高）

3.2、量化计算

优先级的量化计算分为四个等级：A、B、C、D。

根据四个等级得出一个分数 (a,b,c,d)，然后从左到右以此比较每一位。选择器优先级相等的时候，位于后面的样式覆盖前面的样式。

• A：如果出现内联样式，A=1；否则A=0
• B：等于「ID选择器」出现的次数
• C：等于「类选择器」、「属性选择器」、「伪类」的出现次数
• D：等于「标签选择器」、「伪元素选择器」的出现次数

ul ol li.red			   /* (0,0,1,3) */
#nav .selected > a:hover	/* (0,1,2,1) */