乐闻世界logo
搜索文章和话题
中文
2
CSS 选择器以及选择器的优先级

CSS 选择器以及选择器的优先级

乐闻的头像
乐闻

2023年05月28日 12:57· 阅读 1209

前言

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

CSS 选择器

1. 标签选择器

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

css
<p>选择器</p> p { color: red; }

2. 类选择器

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

css
<p class="example">选择器</p> .example { color: red; }

3. ID选择器

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

css
<p id="example">选择器</p> #example { color: red; }

4. 属性选择器

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

css
<button type="submit">提交</button> [type="submit"] { backgroud-color: red; }

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

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

css
<p>选择器</p> p:hover { color: red; }

6. 子选择器

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

css
<ul> <li>选择器</li> </ul> ul > li { color: red; }

7. 后代选择器

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

css
<div> <p>选择器</p> </div> div p { color: red; }

8. 相邻兄弟选择器

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

css
<div> <h1>选择器标题</h1> <p>选择器</p> </div> h1 + p { color: red; }

9. 通配符选择器

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

css
* { color: red; }

CSS 选择器优先级

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

CSS选择器优先级的规则:

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

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

例子

css
#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时,他们优先级是相同的,后面的样式声明会覆盖前面的样式声明。
标签: