选择器概念
选择器分类
- 基本选择器:共有 5 个基本选择器,是 CSS 选择器的最为基本的用法。
- 层级选择器:共有 4 个层级选择器,是根据 HTML 元素之间的关系来定位 HTML 元素。
- 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合。
- 伪类选择器:允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
- 伪元素选择器:定位所有未被包含 HTML 的实体。
基本选择器
- 类型(Type)选择器(_有些中文资料中称为“元素选择器”_)
- 类(Class)选择器
- ID 选择器
- 通用选择器(_有些中文资料中称为“通配符选择器”_)
- 属性选择器
类型选择器
类型选择器,又称为元素选择器
|
类选择器
|
ID选择器
|
通用选择器
|
属性选择器
-
[attr]
属性选择器:通过 HTML 元素的 attr 属性名来定位具体 HTML 元素,而不关注 attr 属性的值是什么。 -
[attr=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。 -
[attr~=value]
属性选择器:通过 HTML 元素的 attr 属性名,属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一,来定位具体 HTML 元素。 -
[attr|=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 或者以value-
为前缀来定位具体 HTML 元素。 -
[attr^=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。 -
[attr$=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。 -
[attr*=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。
选择器的优先级
优先级的计算方式如下:
- 优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。
- 当同一个元素有多个声明的时候,优先级才会有意义。
选择器类型权重
- 通配符选择器的优先级为 0
- 类型(元素)选择器的优先级为 1
- 类选择器和属性选择器的优先级为 10
- ID 选择器的优先级为 100
- 内联样式的优先级为 1000
内联样式总会覆盖内嵌样式表和外联样式表的任何样式。
!important 例外规则
如果使用 !important
规则的话,会覆盖掉所有其他选择器的声明样式。
注意:由于 !important
规则会破坏 CSS 选择器类型的权重规则,所以在开发中不建议使用。