前端必备技能:掌握CSS选择器及其优先级

前言

CSS选择器是CSS用于选择HTML元素并应用具体样式属性的语法。CSS选择器有许多种类型,本文会详细列举所有的选择器并举例说明具体用法以及CSS选择器权重计算和CSS生效属性分析。

CSS 选择器

1. 标签选择器

通过标签名称选择元素,如p选择所有段落元素。

选择器

p
{ color: red; }

2. 类选择器

通过类名选择元素,如.example选择所有类名元素为example的元素。

选择器

.example
{ color: red; }

3. ID选择器

通过ID选择元素,如#example选择ID为example的元素。

选择器

#example
{ color: red; }

4. 属性选择器

通过DOM属性及值选择元素,如[type=”submit”]选择所有type属性值为text的元素;



[type="submit"] {
	backgroud-color: red;
}

5. 伪类选择器、not()伪类选择器

通过元素的特定状态下选择元素,如:hover选择鼠标悬停在DOM的属性;

选择器

p:hover
{ color: red; }

6. 子选择器

选择一个元素的直接子元素;

  • 选择器
ul > li
{ color: red; }

7. 后代选择器

选择一个元素的后代元素;

选择器

div p
{ color: red; }

8. 相邻兄弟选择器

选择紧接在另一个元素后面的兄弟元素;

选择器标题

选择器

h1 + p
{ color: red; }

9. 通配符选择器

使用(*)作为选择器,表示匹配HTML中所有的元素。通配符选择器一般只会在特殊情况下使用,比如需要对全局样式进行重置时。

* {
	color: red;
}

CSS 选择器优先级

之所以涉及到选择器优先级问题,是因为在同一个DOM元素上设置多个CSS选择器并且设置了不同的CSS属性,CSS选择器优先级最高的选择器对应的CSS属性就是DOM最终生效属性。

CSS选择器优先级的规则:

  1. 选择器权重
    不同的选择器的权重是不同的,具体的权重分数详情如下
    ID选择器的权重为100;
    类选择器、属性选择器、伪类选择器的权重为10;
    标签选择器的权重为1;
    通配符选择器、子选择器、相邻选择器、后代选择器、:not()伪类选择器权重为0;

组合每个选择器的权重并求和,最终值最高的选择器生效。

例子

#example .example-class p:first-child {
  color: red;
}

ID选择器 #example:100

类选择器 .example-class:10

标签选择器 p:1

伪类选择器 :first-child:1

选择器权重求和:100 + 10 + 1 + 1 = 112。

  1. !important关键字
    用于强制将样式应用在DOM元素上,其优先级非常高,可以覆盖其他选择器应用的样式。
    当多个样式声明都适用了!important时,他们优先级是相同的,后面的样式声明会覆盖前面的样式声明。

你可能感兴趣的:(#,CSS,前端,css)