谈谈CSS层叠优先级

勤奋的程哥

于 2022-02-15 14:37:18 发布

阅读量1.2k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/hsjajwbsbsjs/article/details/122941579

版权

CSS样式是HTML文档的外观优化，最近学习CSS发现它的样式层叠方式没那么简单，于是写了这篇文章做一个小小的总结（目前为边学习边写博客，故如有错还请指出，多谢）

一、样式编写的位置

在HTML文档中，可分为两种方式定义样式：

第一种：作者样式

作者样式又分为三种：

1.元素style属性

style是HTML中的一个全局属性，也就是说所有元素都能使用，下面给出一例：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
</head>
<body>
    <h1 style="background:blue">style属性</h1>
</body>
</html>
<!DOCTYPE HTML>

我用谷歌打开的运行结果：

2.文档<style></style>元素

该元素在html文档中的父元素为<head></head>，内容为css代码，能作用于该html文档。

css对html元素起作用的方式目前我所知有四种（属于css知识）：

这四种都属于选择器的编写方式

å:选择器前加上所作用的元素种类

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
    h1{
        background: blue;
        color:white;
    }
    </style>
</head>
<body>
    <h1>&#60;style&#62;&lt;/style&gt;元素</h1>
</body>
</html>
<!DOCTYPE HTML>

运行结果如下：

ß:选择器前加上“.“表示选择对应class属性的元素

class属性也是一个全局属性，对元素本身没有直接影响，可被css和JavaScript使用

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
    .head{
        background: blue;
        color:white;
    }
    </style>
</head>
<body>
    <h1 class="head">&#60;style&#62;&lt;/style&gt;元素</h1>
</body>
</html>
<!DOCTYPE HTML>

运行结果：

∂:在元素前加上“#”表示选择对应id属性的元素

id属性也是一个全局属性，但特点是整个html文档所有元素id属性值不能重复，也就是每一个与元素的id属性值是独一无二的

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
    #head{
        background: blue;
        color:white;
    }
    </style>
</head>
<body>
    <h1 id='head'>&#60;style&#62;&lt;/style&gt;元素</h1>
    <h1 id='not head'>other</h1>
</body>
</html>
<!DOCTYPE HTML>

运行结果：

3.文档通过<link/>元素引入外部css样式表

----css.css----
#head{
    background :blue;
    color: white;
}



----styles.html----
<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <link rel="stylesheet" tyle="text/css" href="css.css"/>
</head>
<body>
<h1 id='head'>&#60;style&#62;&lt;/style&gt;元素</h1>
<h1 id='not head'>other</h1>
</body>
</html>
<!DOCTYPE HTML>

使用方法就是把style元素中的内容单独写到css文件中

运行结果于上相同

这三种方式可以同时使用，如果它们定义的属性冲突了，又该如何决定实际的属性值呢？

比如说：

----style.css----
p{
    background: blue;
}



----page.html----
<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <!-- link元素 -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- style元素 -->
    <style>
        p{
            background: cyan;
        }
    </style>
</head>
<body>
<!-- style属性 -->
<p style="background:red">paragraph</p>
</body>
</html>
<!DOCTYPE HTML>

运行一下就知道结果了！

显而易见，浏览器选择了元素的style属性

其根本原因是这样滴：

对于这三种作者样式，其优先级关系为：style属性>style元素>link元素

当某一个元素的某一种样式属性出现冲突时，按照以上的顺序查找并决定最终样式

但如果在同一层优先级中又出现了冲突属性，又该如何决定最终样式呢？

对于style属性，一般不会出现冲突，除非你故意重复编写一种属性的样式（不要乱来呀！）这里就不讨论了

对于style元素（内的css代码）或单独的link元素（css文件内的代码），若多个类的属性冲突了，并且在html文档中有一个元素class属性包含了这多个类会怎么样呢？

如下代码以style元素为例：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
        .head1{
            background: cyan;
        }
        .head2{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="head1 head2">paragraph</p>
</body>
</html>
<!DOCTYPE HTML>

运行结果：

可以看到，系统选择了编写位置靠后的head2类的属性。

这里得到结论：当属性选择的选择器优先级程度和具体化程度相同时，以编写位置靠后（版本最新）者属性为主

那么如果在id选择器和class选择器中出现属性冲突呢？

如下代码：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
        #head1{
            background: cyan;
        }
        .head2{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="head2" id="head1">paragraph</p>
</body>
</html>
<!DOCTYPE HTML>

运行结果：

系统选择了id选择器

我们可以得到结论：当选择器优先级相同时，具体度高的选择器优先级高于具体度低的。

在这里id选择器具体度无疑是最高的，高于class选择器，即使id选择器编写位置更靠前。

具体度大小关系：元素选择器>class选择器>id选择器

后面两者关系已经证实了，下面我们验证一下前两者：

代码：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
        .head2{
        background: yellow ;
        }
        p{
            background: red;
        }
        
    </style>
</head>
<body>
<p id="head1" class="head2">paragraph</p>
</body>
</html>
<!DOCTYPE HTML>

运行结果：

但css给出了一种打破原有样式的语法：“!important”语法

使用方法：

<!DOCTYPE HTML>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>styles</title>
    <style>
        .head2{
        background: yellow ;
        }
<!--直接在“red”之后用添加上“!import" -->
        p{
            background: red !important;
        }

    </style>
</head>
<body>
<p id="head1" class="head2">paragraph</p>
</body>
</html>
<!DOCTYPE HTML>

运行结果：