CSS详细基础（五）选择器的优先级

news2024/11/25 7:32:29

本节介绍选择器优先级，优先级决定了元素最终展示的样式~

浏览器是通过判断CSS优先级，来决定到底哪些属性值是与元素最为相关的，从而作用到该元素上。CSS选择器的合理组成规则决定了优先级，我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态，下面我们来具体了解下CSS选择器优先级及权重。

一.选择器优先级

1.层叠性

2.继承性

3.优先级

4.权重叠加

一.选择器优先级

1.层叠性

当一个元素被定义了两种相同的属性时，按照就近原则选取属性的取值~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div
     {
         color: red;
         font-size: 40px;
     }
     div
     {
         color: orange;
     }

    </style>
</head>
<body>
    <div>心浮气躁乃大忌，希望你能一直铭记</div>
</body>
</html>

如上述代码，虽然div的color值被定义了两次，但是由于orange离得div更近（物理上），因此字体应该为橙色~

2.继承性

如果子代选择器和它的父类选择器有相同的属性，则按照子类的取值呈现~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
        {
            color: rgb(40, 47, 255);
            font-size: 40px;
            line-height: 1.5;
        }
        p
        {
            font-size: 20px;
        }
        div
        {
            /* 不继承body选择器的字体大小 */
            font-size: 10px;
            /* 但是继承行高的1.5倍属性 */
        }
    </style>
</head>
<body>
   男儿何不带吴钩，收取关山五十州
   <div>男儿何不带吴钩，收取关山五十州</div>
   <p>男儿何不带吴钩，收取关山五十州</p>
</body>
</html>

如上代码段中，body中的文字被设置为40px ，p中的为20px而div中只有10div，子代的优先级逐级递减，而优先级也愈发增加~效果如下：

3.优先级

CSS选择器的优先级按照以下顺序排列：!important > 内联选择器 > ID选择器 > 类别选择器 > 属性选择器 > 伪类 > 元素选择器 > 通配符选择器 > 继承选择器。如果有多个选择器作用在同一个元素上，浏览器会根据这个优先级顺序来确定应用哪个样式。

在上述优先级顺序中，important是最高优先级，它可以覆盖其他任何优先级的样式。紧接着是内联选择器，其次是ID选择器，然后是类别选择器、属性选择器、伪类、元素选择器、通配符选择器和继承选择器。

需要注意的是，如果两个选择器的优先级相同，那么最后出现的样式将会被应用。

判断下列文本的颜色？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div
        {
            color: red;
            font-size: 50px;
        }
        .yanse1
        {
           color: yellow;
           color:darkgrey
        }
        #yanse2
        {
            color: rgba(56, 227, 233, 0.815);
        }
        div
        {
            color: gold !important;
        }
    </style>
</head>
<body>
    <div class="yanse1" id="yanse2" style="color: bisque;">你能猜出来我是什么颜色？</div>
</body>
</html>

没错，是金色~

4.权重叠加

CSS权重叠加是指当多个CSS声明应用于同一元素时，它们的权重值会叠加，决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。常见的选择器类型按照优先级从高到低为：内联样式，ID选择器，类选择器，元素选择器和通配符选择器。在同一类型的选择器中，选择器的数量越多，权重值越高。

通俗的说，权重值是复合选择器之间优先级的对比~

计算公式大致由下列表格决定：

选择器	权重计算
继承父标签的样式 , * 通配符选择器	0,0,0,0
标签选择器	0,0,0,1
类选择器，链接伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
标签的行内样式 style 属性	1,0,0,0
样式后添加 !important	权重无穷大

需要注意的是，不同选择器之间的区别为量级，不存在进位的说法！

如下这段代码，包含了3种复合样式控制属性：

    <style>
        li
        {
            color: red;
            font-size: 50px;
        }
        ul li
        {
            color: blue;
        }
        .gold li
        {
            color: gold;
        }
    </style>