了解css选择器权重，以及样式继承
1、CSS选择器
!important > 行内式 > id选择器 > 类选择器 > 标签选择器
权重值： 无穷大 1000 100 10 1
同一选择器，靠后者生效
2、样式继承
继承的权重值为零，所以继承的样式可以被任何选择器修改的属性对应的属性值所覆盖。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
color: blue;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="box">
<h1>案例一</h1>
<h1 class="two">案例二</h1>
</div>
</body>
</html>
如上所示，案例一和案例二两个h1标签继承了来自父元素的id选择器所赋予的color属性值为blue，而我们单独用类选择器对案例二赋予其color属性值为red。
我们知道id选择器的权重大于类选择器，但是由图可知，我们用chrom自带的调试器进行调试，右下角画圈部分表示继承自父元素div的属性，但是画了删除线，表示没有生效，因为被类选择器设置的属性值所覆盖。由此可见继承的权重值比类选择器的1还要低，我们可以认为其权重值为0。
扫一扫
1687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
