CSS优先级

最新推荐文章于 2023-02-17 14:57:34 发布

ITher

最新推荐文章于 2023-02-17 14:57:34 发布

阅读量526

点赞数

文章标签： css html elementui

本文链接：https://blog.csdn.net/ITher/article/details/122226739

版权

1、CSS引入方式

1、行内样式

使用style属性引入，例如：

<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>
</head>
<body>
    <p style="color: red; font-size: 40px;">我们阿森纳是不可战胜的</p>
</body>
</html>

使用行内的作用是，当同时有n个元素时，我只想让其中一个改变样式，这时就可以对某一个元素进行单独的内联样式进行设置，设置后效果和使用style标签一致。

2、内联样式

使用style标签引入吗，例如：

<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>
</head>
<style>
    p{
        color: red;
        font-size：40px；
    }
</style>
<body>
    <p>我们阿森纳是不可战胜的</p>
</body>
</html>

当我在style标签中设置p标签中的内容后， p标签中的内容就会显示出我设置的样子。

3、外部样式

3.1、定义一个css文件

3.2、使用link标签引入html中

4、层叠 Cascading Style Sheets（层叠样式表）

层叠就是当对同一标签使用同一级别的规则时，写在后面的规则优先使用。例如;

<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>
</head>
<style>
    p{
        font-size: 40px;
        color: royalblue;
        color: red;
    }
</style>
<body>
    <p>我们阿森纳是不可战胜的!</p>
</body>
</html>

可以看到在style属性中设置了两个颜色规则，但最终应用到内容上的是最后的红色规则，这就是层叠属性中的后来者优先原则。

5、继承原则

5.1、inherit设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".例如，当在body中设置了颜色属性，在子元素中只需要在颜色中设置inherit，就可以开启继承，达到颜色相同的目的。

我们继续用颜色举例子：

<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>
</head>
<style>
body{
    color: blue;
}
p{
    color: inherit;
    font-size: 30px;
}
</style>
<body>
    <p>
        颜色
    </p>
</body>
</html>

5.2、initial 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

例如：

<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>
</head>
<style>
body{
    color: blue;
}
p{
    color: initial;
    font-size: 30px;
}
</style>
<body>
    
    <p>
        颜色
    </p>
</body>
</html>

5.3、unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

<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>
</head>
<style>
body{
    color: blue;
}
p{
    color: unset;
    font-size: 30px;
}
</style>
<body>
    
    <p>
        颜色
    </p>
</body>
</html>

可以看到在设置了unset以后，因为color这个属性默认开启继承，所以在设置了unset以后，会自动继承inherit，而非initial。

6、优先级

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

6.1、行内样式优先级最高

例如：

<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>
</head>
<style>
    p{
        font-size: 40px;
        color: blue；
    }
</style>
<body>
    <p style="color: red;">利物浦是冠军!</p>
</body>
</html>

在我同时设置了style标签和style属性的规则后，可以发现首先应用的规则是style属性规则。

6.2、ID选择器次之

例如：

<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>
</head>
<style>
    p{
        color: cornflowerblue;
    }
    #list{
        font-size: 40px;
        color: red;
    }
</style>
<body>
    <p id="list">利物浦是冠军!</p>
</body>
</html>

当设置了id选择器的规则之后，可以看到默认优先的是id选择器的规则，而非style属性

6.3类选择器标签选择器

例如：

<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>
</head>
<style>
    body{
        color: blue;
    }
    .p-1{
        font-size: 40px;
        color: red;
    }

</style>
<body>
    <p class="p-1">利物浦是冠军!</p>
</body>
</html>

当我使用类选择器后，默认也将会优先类选择器的规则。

6.4！important 优先级最高

例如：

<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>
</head>
<style>
    body{
        color: blue;
    }
    p{
        font-size: 40px;
        color: red!important;
    }

</style>
<body>
    <p style="color: blueviolet;">利物浦是冠军!</p>
</body>
</html>

如图，当在某一规则后设置了！important后，此规则将变为优先级最高的规则，其中也可以看到我在标签内设置了行内样式，但最终显示出来的规则为设置了！important的规则。但！important在使用时需要慎重，因为在开发中，如若设置后，后期出问题需要修改时将会极其麻烦。

6.5、最后的注意事项：

通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。

在权重相同的情况下，后面的样式会覆盖掉前面的样式

ITher

关注

0
点赞
踩
0

收藏

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

1、CSS引入方式1、行内样式使用style属性引入，例如：<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"> .
复制链接

扫一扫