先说一下何为优先级
1、假设我们给一个标签同时写了行内样式、内联样式和外联样式，而且样式属性全部一样，请问最终生效的是哪个呢？
答案是：行内样式>内联样式/外联样式，内联样式和外联样式不存在优先级问题，谁后渲染（加载）谁生效。
2、假设一个标签同时有id、class和name属性，请问，如果我们分别使用id、class和name选择器给这个标签设置样式，最终生效的是哪个呢？
答案是：伪类首字选择器>伪类首行选择器>!important>id选择器>类名选择器/属性选择器>标签名选择器>通配选择器
以上两个问题就是优先级的问题。
下面我们用代码来说明一下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css样式的优先级</title>
</head>
<body>
<style>
*{
color:pink !important;
}
#myid{
color:blue;
}
.box{
color:green;
}
div:first-letter{
color:brown;
}
div:first-line{
color:yellow;
}
[name="zhangsan"]{
color:purple;
}
div{
/*width:100px;
height:100px;*/
/* !important强制优先 */
/*background:#f00 !important; */
color:red;
}
</style>
<div class="box" id="myid" name="zhangsan">
飞来山上千寻塔，<br>
闻说鸡鸣见日升！
</div>
</body>
</html>
显示结果如下：
以上代码中，我们分别用id、name、class、标签、首字、首行给div设置了样式，我们看到，最终首字的颜色覆盖了首行的颜色，由于我们给通配选择器中的color属性添加了!important，所以通配选择器的color属性的优先级高于除了首字和首行选择的器的任何选择器，最终第二行的颜色是通配选择器的颜色。
|
窥视卡
雷达卡
发表于 2023-1-31 22:49:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 15:12:21
