CSS选择器按照匹配方式分为以下几类:
- 元素选择器(selector):
p
,div
,h1
等; - 类选择器(class selector):
.class
,例如.red
等; - ID 选择器(id selector):
#id
,例如#header
; - 属性选择器(attribute selector):通过元素的属性选择元素,例如
[src]
; - 伪类选择器(pseudo-class selector):作用于特定状态下的选择器,如链接的状态,hover 状态,如
:hover
,:active
等; - 子元素选择器(child selector):选择某个父元素下作为子元素的元素,用
>
表示,如ul > li
选择所有父元素为 ul 的直接子元素li
; - 后代元素选择器(descendant selector):选择某个元素内部的所有目标子元素,用空格表示,如
ul li
选择所有在 ul 标签内的li
; - 相邻兄弟选择器(adjacent sibling selector):选择紧接着某个元素后面的第一个兄弟元素,用
+
表示,如h2 + p
; - 通用选择器(universal selector):用
*
来表示,选择页面中所有元素。
CSS属性继承性规则如下:
- 所有元素都有继承属性。如 font-size,color 等;
- 如果父元素的属性和子元素的属性发生冲突,则以子元素的属性为准;
- 关于优先级规则:
!important
> 行内样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器 >*
- 选择器的权重可通过以下规则计算:ID选择器的个数 * 100 + 类/属性/伪类选择器的个数 * 10 + 元素选择器/伪元素选择器的个数 * 1。其中,通配符选择器是没有权重值的。
总体上,CSS选择器可以灵活应用于HTML标记,通过css属性来装饰网页页面,并且继承性的存在可以进一步减少代码冗长度。