抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

选择器分类

基本选择器

类型例子说明
通配符选择器*选择任意元素
类型选择器p选择p标签的元素
类选择器.name选择拥有.name类的元素
ID选择器#name选择拥有idname的元素
属性选择器[href]选择有属性href的元素

属性选择器

类型说明
[href]选择有属性href的元素
[href="https://www.baidu.com"]选择有属性href且值为https://www.baidu.com的元素
[href^="https://"]选择有属性href且值以https://开头的元素。
[href\|="https"]选择有属性href且值以https开头的元素,https后面必须是空格或连接字符-
[href$="/"]选择有属性href且值以/结尾的元素。
[href*="baidu"]选择有属性href且值包含baidu的元素。
[href~="baidu"]选择有属性href且值包含baidu的元素,baidu前后必须是空格或连接字符-

分组选择器

类型例子说明
分组选择器A, B选择所有能被列表中的任意一个选择器选中的节点

组合选择器

类型例子说明
条件选择器div.container选择div标签下满足类名为container元素
后代选择器div p选择div标签下所有的p元素,无论元素是否与div构成父子关系
直接子代选择器div>p选择div标签下所有的p元素,且选中元素与div构成父子关系
一般兄弟选择器div~p选择div标签后面的p元素,无论元素是否与div构成相邻关系
紧邻兄弟选择器div+p选择div标签后面的p元素,且选中元素与div构成相邻关系

伪元素选择器

类型说明
::before标签内部第一个元素
::after标签内部最后一个元素

伪类选择器

类型说明
:link链接,一般用于 a 标签
:hover鼠标覆盖状态,一般用于 a 标签和表单元素
:active鼠标点击状态,一般用于 a 标签和表单元素
:visited鼠标点过状态,一般用于 a 标签和表单元素
:focus获得焦点状态,一般用于表单元素
:blur失去焦点状态,一般用于表单元素
:enabled起用状态,一般用于表单元素
:disabled禁用状态,一般用于表单元素
:checked选中状态,一般用于表单元素
:empty空元素状态(元素里面没有元素)
:first-child选择满足条件的第一个元素(按照同级元素的次序计数)
:last-child选择满足条件的最后以个元素(按照同级元素的次序计数)
:nth-child(n)选择满足条件的第n个(按照同级元素的次序计数)。n可以是表达式,如2n-1选择奇数位置的元素。
:first-of-type选择满足条件的第一个元素(按照满足条件的同级元素的次序计数)
:last-of-type选择满足条件的最后个元素(按照满足条件的同级元素的次序计数)
:nth-of-type(n)选择满足条件的第n个元素(按照满足条件的同级元素的次序计数)。n可以是表达式。
:not(selector)选择不满足选择器selector的元素。

选择器优先级

优先级次序

位次选择器
无影响通配选择符(*)关系选择符(+, >, ~, ’ ',
C类型选择器、伪元素
B类选择器、属性选择器、伪类选择器
AID选择器
内联样式
最高!important

优先级比较

通常使用AABBCC 来比较选择器优先级。这三个字母对应上面优先级次序对应选择器的数目。

  • 比较两个选择器时,A越大,优先级越高
  • 若A相同,B越大,优先级越高
  • 若A和B相同,C越大,优先级越高

标准文档中没有指定内联和important的优先级,实际计算中我们可以把考虑比较顺序调整一下:!important > 内联样式 > A>B>C。

一些例子:

选择器abc
*000
ul001
ul li002
ul ol+li003
.red010
ul.red011
#id100
#id > .b > .c120

层叠和继承

在实际运用中,同一个元素的样式来自多个CSS样式,层叠则规定了如何合并这些样式。

三个影响因素:

  • 重要程度:重要程度越高,影响越大
  • 优先级:优先级越高,影响越大
  • 资源顺序:越靠后的资源,影响越大

重要程度

用户代理样式:浏览器默认的样式
用户样式:开发人员在浏览器设置的样式
作者样式:页面作者设置的样式

级别来源!important
1user agent (用户代理样式)normal
2user (用户样式)normal
3author(页面作者样式)normal
4animations (动画)
5author (用户作者样式)!important
6user (用户样式)!important
7user agent (用户代理样式)!important
8transitions (过渡)

继承

可继承属性:

  1. 字体属性
  2. 文本属性
  3. 可见性 visability
  4. 表格和列表布局属性 border-style list-style list-style-type
  5. 光标属性

参考

  1. https://specifishity.com/
  2. W3C 选择器优先级规范:https://www.w3.org/TR/selectors/#specificity-rules

评论