css初识-选择器优先级
程序员文章站
2024-01-29 18:03:52
...
css使用方式
- 通过style标签设置样式
- 通过style属性设置样式
- 通过css文件
注意：
- 选择器的优先级，在其余情况相同的情况下，继承的样式<浏览器默认的样式<标签样式<claa样式<id样式<style属性样式
element.style的优先级最高，覆盖掉了id选择器的样式
css的优先级高，也就是说，同样的选择器，谁在后面谁的优先级高
- 如果想让底层的优先级升到最前面，加 !important，但是如果两种都有 !important，还是按照原本的优先级排序
- 越具体越复杂的选择器，优先级越高
例如：原本代码和优先级排序
<body>
<div id="d1" style="color: antiquewhite;font-size: 200px;">
hello word1
</div>
<div id="d2" style="color: pink;font-size: 100px;">
hello word2
</div>
<div id="d3">
hello word3
</div>
<style type="text/css">
#d1{
color:yellow;
font-size: 100px;
}
div{
color: aquamarine !important;
font-size: 150px;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</body>#d3{
color: saddlebrown;
font-size: 100px;
}
#d1{
color: #8B4513;
font-size: 200px;
}css文件选择器优先级高于style标签选择器
但在css文件夹中加入代码
body #d1{
color: grey;
font-size: 200px;
}优先级发生变化