没有权值的情况
外部样式(链接式、导入式) < 内部样式(内嵌式<行内式)
有权值的情况
通配符选择器 权值 0
标签选择器 伪类选择器 权值 1
类选择器 属性选择器 权值 10
id选择器 权值 100
!important 权值 1000
在style属性中定义的样式默认都是 1000 但是外面定义的样式权值大于1000时 也会执行外面的样式
.div1 .span1 =10+10=20 span的color为red
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="./css1.css">
<style>
.div1 .span1{
color: red;
}
.span1{
color: blue;
}
</style>
</head>
<body>
<div class="div1" id="id_div">
<span class="span1" id="id_span">css加权值测试</span>
</div>
</body>
</html>
拓展1
引入了 css1.css 中
span{
color: green !important;
}
!important=1000
所以 此时 span 的 color 为 green
拓展2
引入了 css1.css文件 中
span{
color: green;
}
内嵌样式表
<style>
span{
color: blue;
}
span{
color: red;
}
</style>
经典顶替：相同操作 后面的 顶替前面的 就近优先
执行 color:red
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
