CSS选择器以及优先级

陈君何001

已于 2025-02-21 19:57:23 修改

阅读量1.2k

点赞数 34

文章标签： css 前端

于 2025-02-21 19:54:16 首次发布

本文链接：https://blog.csdn.net/qq_49021656/article/details/145784271

版权

CSS选择器有哪些？优先级？

选择器

CSS选择器是CSS规则的第一部分。是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。
选择器所选择的元素，叫做“选择器的对象”
这是个部分html:

<div id="box">
    <div class="box1">
        <p class="box1_1">
        </p >
        <p class="box1_2">
        </p >
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

基本选择器

1.ID选择器：选择具有特定ID的元素。ID选择器以井号（#）开头。

#box {
    border: 2px solid black;
}

会选择具有id="box"的元素并为它添加黑色边框。
2. 类选择器：选择具有特定类名的元素。类选择器以点号（.）开头。

.box1 {
    background-color: blue;
}

会选择所有具有类名box1的元素并设置其背景颜色为蓝色。
3. 标签选择器：选择所有特定标签的元素。

 p {
    color: red;
}

会选择所有<p>元素并将文本颜色设置为红色。

组合选择器

后代选择器：选择指定元素内部的所有子元素，不论其层级深度。

.box1 p {
    font-size: 16px;
}

会选择所有class="box1"元素中的<p>元素，并设置字体大小为16px。
2.子元素选择器（Child Selector）选择直接子元素。

.box1 > p {
    color: green;
}

会选择class="box1"下的直接<p>子元素，并将其文字颜色设置为绿色。
3.相邻兄弟选择器: 选择紧跟在特定元素后的兄弟元素。

.box1_1 + .box1_2 {
    background-color: yellow;
}

会选择紧接在class="box1_1"后的class="box1_2"元素，并将其背景色设置为黄色。
4.通用兄弟选择器:选择所有兄弟元素，不限于紧接着的兄弟元素。

.box1_1 ~ .box2 {
    border: 2px dashed purple;
}

会选择class="box1_1"元素后的所有兄弟元素中具有class="box2"的元素，并设置紫色虚线边框。

属性选择器

1.选择具有特定属性的元素

div[class] {
    background-color: lightgray;
}

会选择所有具有class属性的<div>元素，并将其背景颜色设置为浅灰色。

2.选择具有特定属性值的元素

div[class="box1"] {
    padding: 10px;
}

会选择class="box1"的

元素，并为它添加10px的内边距。

3.选择属性值以某个值开头的元素

div[class^="box"] {  
	margin: 20px;
}

会选择class属性值以box开头的所有

元素，并为它们添加20px的外边距。

4.选择属性值包含某个值的元素

div[class*="box"] {
    border: 1px solid black;
}

会选择所有class属性值中包含box的<div>元素，并为它们添加黑色边框。

伪类选择器

:hover（悬停）选择用户将鼠标悬停在元素上时的样式。

.box1:hover {
    background-color: lightblue;
}

会在用户将鼠标悬停在class="box1"元素上时，将其背景颜色更改为浅蓝色。

:first-child（第一个子元素）选择作为父元素第一个子元素的元素。

.box1 p:first-child {
    color: orange;
}

会选择class="box1"下的第一个

子元素，并将其文字颜色设置为橙色。

:last-child（最后一个子元素）选择作为父元素最后一个子元素的元素。

.box1 p:last-child {
    color: purple;
}

会选择class="box1"下的最后一个<p>子元素，并将其文字颜色设置为紫色。

:nth-child()（第n个子元素）选择特定位置的子元素。

.box1 p:nth-child(2) {
    font-weight: bold;
}

会选择class="box1"下的第二个<p>子元素，并将其文字加粗。

伪元素选择器

::before（在元素前添加内容）允许在元素的内容之前插入内容。

.box2::before {
    content: "Before box2";
    color: red;
}

会在class="box2"元素的内容之前插入文本"Before box2"并将其文字颜色设置为红色。

::after（在元素后添加内容）允许在元素的内容之后插入内容。

.box2::after {
    content: "After box2";
    color: blue;
}

会在class="box2"元素的内容之后插入文本"After box2"并将其文字颜色设置为蓝色。

这里解释一下伪类和伪元素选择器：
伪类选择器用于选择元素的特定状态或位置，它们描述了元素的外部状态或生命周期，例如元素在用户交互时的状态。
伪元素选择器用于选择并样式化元素的某个部分或某些特定内容（例如，元素的首字母、首行，或者在元素前后插入内容等）。

优先级

优先级（Specificity）是 CSS 中用来决定样式应用顺序的重要规则。CSS 选择器的优先级决定了在多个样式冲突时，哪一个样式会被应用到元素上。优先级通过计算选择器中不同类型的元素来决定。

优先级计算规则

在 CSS 中，优先级的计算基于选择器中的不同类型的组件。这些组件的优先级值被分为四个部分：A、B、C、D。每个部分代表一种类型的选择器或修饰符，根据出现的次数来决定优先级的权重。

A：内联样式的权重
如果有内联样式（即元素的 style 属性），A = 1，否则 A = 0。
B：ID选择器的权重
如果选择器中有 ID 选择器（即以 # 开头的选择器），B 的值等于该 ID 选择器出现的次数。
C：类选择器、属性选择器和伪类选择器的权重
C 的值等于所有类选择器（以 . 开头）、属性选择器（如 [type=“text”]）和伪类选择器（如 :hover）出现的总次数。
D：标签选择器和伪元素的权重
D 的值等于标签选择器（如 div、a）和伪元素选择器（如 ::before、::after）出现的总次数。

优先级计算示例

考虑这个选择器：#nav-global > ul > li > a.nav-link

根据优先级的计算规则，我们可以依次计算 A、B、C、D 的值。

计算 A（内联样式）
该选择器没有内联样式，所以 A = 0。
计算 B（ID选择器）
选择器中包含了 #nav-global，这是一个 ID 选择器。
因此，B = 1（ID选择器出现了一次）。
计算 C（类选择器、属性选择器、伪类选择器）
选择器中包含了 .nav-link，这是一个类选择器。
因此，C = 1（类选择器出现了一次）。
这里没有属性选择器和伪类选择器，所以它们的值是 0。
计算 D（标签选择器和伪元素）
选择器中有 ul、li、a，这些都是标签选择器。
因此，D = 3（标签选择器分别出现了 3 次）。
这里没有伪元素，所以伪元素的值是 0。

最终优先级：
根据上述计算，#nav-global > ul > li > a.nav-link 的优先级是：
A = 0
B = 1
C = 1
D = 3
简写为： (0, 1, 1, 3)