CSS - 权重 ¶
作者：KK
发表日期：2016.1.26
当有两个不同的选择器都指定了同一个元素使用相同的样式属性时,权重机制决定了使用哪个选择器的值
简单地理解,越长的选择器描述越详细,它就越是有优先的渲染级别
看以下例子:
<body>
<style type="text/css">
a{color:red; font-size:20px;} /*这里会把p里面的a都渲染成红色字*/
p a{color:green;} /*这个选择器也是选择了p里面的a,跟上面有选择同一个元素,但由于这个选择器说明提比较详细,所以浏览器会优先使用这个绿色字体样式进行渲染*/
</style>
<div>
<a href="#">链接1</a>
<p>
<div>
<a href="#">链接2</a>
</div>
</p>
</div>
</body>
强制使用 ¶
可以在属性值后面加一个空格然后写!important来实现强制使用这个属性,例如:
<body>
<style type="text/css">
body div a{color:red; font-size:20px;} /*这里会把p里面的a都渲染成红色字*/
body a{color:black !important} /*这里这里,看这里 !important*/
</style>
<div>
<a href="#">链接1</a>
<p>
<div>
<a href="#">链接2</a>
</div>
</p>
</div>
</body>
如果你不加 !important 就不会变黑色,为什么不会变呢?就因为上面那个选择器比较详细啊,人家说 body里面的div里面的a
但第2个选择器比第1个选择器模糊,直接说body里面的a,所以浏览器本来会优先渲染第一个选择器的颜色的,只是看见你说 !important 那么它又强制使用了第2个选择器的颜色了