CSS权重与优先级

最新推荐文章于 2024-01-15 15:26:26 发布

叁五程序员

最新推荐文章于 2024-01-15 15:26:26 发布

阅读量670

点赞数 3

文章标签： css 前端 html vscode

本文链接：https://blog.csdn.net/qq_53002615/article/details/122408376

版权

声明冲突：

同一个样式，多次的应用到同一个元素上。

/* 自己设计 */
a{
    color:red;
    text-decoration:none;
}
/* 浏览器默认 */
a:-webkit-any-link{
    color:webkit link;
    cursor:pointer;
    text-decoration:underline;
}

元素里面可能会有多个样式，有些相同的样式会产生声明冲突。在这里，a元素产生了两个声明冲突，一个是color属性，一个是text-decoration属性。

权重与优先级

重要性->特殊性->源次序

1、重要性比较（由高到低）

（1）作者样式表中的important样式（作者样式表：即开发者自己书写的样式）

a{
    color:red !important;
    text-decoration:none;
}

（2）作者样式表的普通模式

a{
    color:red;
    text-decoration:none;
}

（3）浏览器中默认样式表中的样式

2、比较特殊性（权重计算）

若重要性相同，则比较其特殊性

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个四位数，越大越特殊

（1）千位：如果是内联样式，千位记为1，否则为0

a：内联样式：直接在元素内部书写样式

<p style="color: red;">Lorem ipsum dolor sit amet.</p>

b：内部样式：书写在style元素中，一般放在head中，主要是希望浏览器在加载中能最先把CSS代码加载出来

<style>
    h1{
        color: red;
        background-color: lightblue;
        text-align: center;
    }
</style>

c：外部样式表：将样式书写到独立的css文件中，通过link元素链接

<link rel="stylesheet" href="./css/index.css">

（2）百位：等于选择器中所有id选择器的数量

/* id选择器 */    
/* id就相当于人的身份证，一个元素只能有一个id*/    
#test{
        color: blue;
    }

（3）十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

/*类选择器*/
    .red{
        color: red;
        font-size: 2em;
    }


/*属性选择器*/
   [href]{
    color: red;
    }


/*伪类选择器 */
/* 元素:选择器，选中某些元素的某种状态 */
   a:hover{
    color: yellow;
    }

   :hover{
    color: yellow;
    }

（4）个位：等于选择器中，所有元素选择器、伪元素选择器的数量

/*元素选择器*/
        p{
        color: yellow;
    }

/*伪元素选择器*/
/*这里相当于在span里面生成了一个子元素，content代表生成元素的文本内容*/
   span::before{
    content: "《";
    color: seagreen;
   }

3、比较源次序

在重要性，特殊性都相同的情况下，只能通过比较源次序

源次序：开发者书写代码的排列顺序，代码书写靠后的胜出，因为计算机是一行一行的阅读代码。

举例：

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>
        p{
            color: red !important;
        }
        p{
            color: seagreen;
        }
        
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor.</p>
    <p>Voluptate, dolore assumenda!</p>
</body>
</html>

页面显示结果：

若没有加入important样式，根据源次序，应采用第二个样式。加入important样式则采用第一个样式。

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>
        a{
            /* 0001 */
            color: red;
        }
        #d1 #d2 a{
            /* 0201 */
            color: yellow;
        }
        #d1 #d2 .t3{
            /* 0210 */
            color: green;
        }
        #d1 #d2 a:link{
            /* 0211 */
            color: blue;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2">
        <a href="www" class="t3">Lorem, ipsum dolor.</a>
    </div>
</div>
</body>
</html>

元素选择器：a

id选择器：#d1，#d2

类选择器：.t3

伪类选择器：:link

a:link：超链接未被访问时的状态

页面显示结果：

在重要性相同的情况下，最后的一个计算出的值最大（代码中注释），则采用最后一个样式

注：若采用内联样式，则四位数第一位直接变为1，值最大

添加内联样式：

<a href="www" class="t3" style="color: #000;">Lorem, ipsum dolor.</a>

页面显示结果：

总结：

在同一个样式，多次的应用到同一个元素上时，会产生声明冲突，计算机会根据重要性比较、特殊性比较、源次序比较来选出最终唯一的样式，应用于元素。

如果在阅读中遇到错误，请您立刻指出，如果有写的不好的地方，也请提出您宝贵的建议。谢谢！

叁五程序员

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS权重与优先级

声明冲突：同一个样式，多次的应用到同一个元素上。/* 自己设计 */a{ color:red; text-decoration:none;}/* 浏览器默认 */a:-webkit-any-link{ color:webkit link; cursor:pointer; text-decoration:underline;}元素里面可能会有多个样式，有些相同的样式会产生声明冲突。在这里，a元素产生了两个声明冲突，一个是color属性，一个是te
复制链接

扫一扫