css样式优先级计算规则

css3

浏览数:577

2019-7-28

css样式的优先级分为引入优先级和声明优先级。

引入优先级

引入样式一般分为外部样式，内部样式，内联样式。

外部样式：使用link引入的外部css文件。

内部样式：使用style标签书写的css样式。

内联样式：直接书写在html标签里面的css样式。

优先级如下：

内联样式 > 外部样式 = 内部样式

外部样式优先级和内部样式优先级相同，故写在后面的样式会覆盖前面的样式。

声明优先级

一般优先级如下：

!important > 内联 > ID > Class|属性|伪类 > 元素选择器
:link、:visited、:hover、:active 按照LVHA顺序定义

优先级算法：

等级	内联选择器	ID选择器	类选择器/属性选择器/伪类	元素选择器
示例	`<span style="color:red;"></span>`	`#sp{color:red}`	`.sp{color:red}` `[type="text"]{color:red}` `:nth-of-type(1){color:red}`	`span{color:red}`
优先级	1-0-0-0	0-1-0-0	0-0-1-0	0-0-0-1

注意：

**通配符 * 的优先级为 0-0-0-0，但是优先级大于继承样式优先级。++

优先级算法示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{color: yellow;} /*特殊性值：0,0,0,1*/
        div a{color: green;} /*特殊性值：0,0,0,2*/
        .demo a{color: black;} /*特殊性值：0,0,1,1*/
        .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
        .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
        #demo a{color: orange;} /*特殊性值：0,1,0,1*/
        div#demo a{color: red;} /*特殊性值：0,1,0,2*/
    </style>
</head>

<body>
    <a href="">第一条应该是黄色</a>
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" />
        <a href="">第三条应该是黑色</a>
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a>
    </div>
</body>

</html>

作者：Daotin

原文地址：https://www.cnblogs.com/lvonve/p/11250196.html

喜欢 0