我的理解是有 3 种类型的样式表:
- 由页面作者定义
- 由用户定义(即一组由用户定义并安装到他们的浏览器中的默认样式)
- 浏览器定义的默认样式表
根据 this book如果元素与这些样式表中的任何一个中的选择器都不匹配,则属性值才会从父元素继承。然而,这本书还说浏览器的默认样式表应该为所有类型的元素定义一个样式。
如果浏览器的样式表确实为所有类型的元素定义了一种样式,并且这种样式的优先级高于继承,那么继承的属性值永远不会被观察到。显然情况并非如此,那么浏览器默认样式表中定义的属性和为父元素定义的属性的正确优先级规则到底是什么? (我知道并非所有的 CSS 属性都会继承,但为了讨论起见,假设我指的是一个属性,例如 color
)
提前致谢, 唐
最佳答案
浏览器不会为所有 元素定义样式,只会为某些元素定义样式。简化的内部浏览器样式表可能如下所示:
a { color: blue; border-bottom: 1px solid blue }
p { margin-bottom: 1em; }
blockquote { margin: 0 5em 1em 5em; }
以下面的 HTML 片段为例:
<ul>
<li>
<span>Blah blah blah.</span>
</li>
<li>
<a href="about:">Foo</a>
</li>
</ul>
当浏览器开始渲染 <span>
时元素,它会查看所有样式表(浏览器、作者和用户)以查找匹配的规则和 figures out which one is the most important .对于这个例子,作者样式表包含一个规则:
ul { color: Green; }
您的浏览器的内部样式表未指定 color
span
的值, 所以它沿着文档树向上走,直到它找到确实有 color
的东西规则已定义,在本例中为 ul
.
另一方面,当浏览器呈现 <a>
元素,它在用户或作者样式表中找不到任何指定 color
的内容, 因此它使用在浏览器样式表中找到的规则。
最终结果:绿色文本,蓝色链接。
奖励信息:如果您使用的是 Firefox,您可以通过粘贴 resource://gre/res/html.css
查看它的(其中一个)内部 css 文件。进入地址栏。 (似乎直接的超链接混淆了 SO 的 Markdown 引擎)
关于html - CSS 优先级规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/498069/