css样式优先级计算规则
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录