css优先级 中文版MDN补充翻译
原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
css的MDN中文版,这一页是讲css的优先级的。
读到文章的最后,末尾部分,翻译貌似是罢工了,而且显示结果也出错了。
英文原版是这样的:
所以,我就来冒昧的翻译一下吧。
——————————–start—————————————————
选择器直接定位到元素的样式与元素继承的css样式进行优先级对比
如果通过css选择器直接定位到元素,那么在这个选择器中声明的样式就比元素继承(自祖先元素)的样式具有更高的优先级。而不管这个继承的样式本身是通过什么方式或者什么优先级的规则定义的。
#parent {
color: green;
}
h1 {
color: purple;
}
当它应用在以下html上的时候
<html>
<body id="parent">
<h1>Here is a title!</h1>
</body>
</html>
浏览器会将它渲染成:
———————————-end———————————————————-