我的理解是样式表有 3 种类型:
- 由页面作者定义
- 由用户定义(即由用户定义并安装到其浏览器中的一组默认样式)
- 浏览器定义的默认样式表
根据如果某个元素与这些样式表中的任何一个选择器都不匹配,则只有这样,属性值才会从父元素继承。然而,这本书还说,浏览器的默认样式表应该为所有类型的元素定义样式。
如果浏览器的样式表确实为所有类型的元素定义了样式,并且该样式的优先级高于继承,则永远不应观察继承的属性值。显然情况并非如此,那么浏览器默认样式表中定义的属性和为父元素定义的属性的正确优先规则到底是什么? (我知道并非所有 CSS 属性都会继承,但为了便于讨论,假设我指的是一个属性,例如color
)
提前致谢,
大学教师
浏览器没有定义样式all元素,只是某些元素。简化的内部浏览器样式表可能如下所示:
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>
元素,它会查找所有样式表(浏览器、作者和用户)以查找匹配的规则弄清楚哪一个是最重要的 http://www.w3.org/TR/CSS2/cascade.html#cascade。对于此示例,作者样式表包含一条规则:
ul { color: Green; }
您的浏览器的内部样式表没有指定color
价值span
,所以它会沿着文档树向上走,直到找到符合以下条件的内容:does have a color
规则定义,在本例中ul
.
另一方面,当浏览器渲染时<a>
元素,它在用户或作者样式表中找不到任何指定color
,因此它使用浏览器样式表中找到的规则。
最终结果:绿色文本,蓝色链接。
奖金信息:如果您使用的是 Firefox,您可以通过粘贴来查看其内部 css 文件(之一)resource://gre/res/html.css
进入地址栏。 (看起来直接的超链接混淆了SO的降价引擎)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)