我的理解是有3种类型的样式表:
由页面作者定义
由用户定义(即用户定义并安装到浏览器中的一组默认样式)
浏览器定义的默认样式表
根据本书,如果某个元素与任何这些样式表中的选择器不匹配,那么属性值才会从父元素继承.但是,该书还说,浏览器的默认样式表应该为所有类型的元素定义样式.
如果浏览器的样式表确实为所有类型的元素定义了样式,并且此样式具有比继承更高的优先级,则永远不应该遵循继承的属性值.显然情况并非如此,那么在浏览器的默认样式表中定义的属性和为父元素定义的属性的正确优先级规则究竟是什么?(我知道并非所有的CSS属性都继承了,但为了讨论起见,我假设我指的是一个属性,例如color
)
唐先生,提前谢谢
浏览器没有为所有元素定义样式,只定义某些元素.简化的内部浏览器样式表可能如下所示:
a { color: blue; border-bottom: 1px solid blue } p { margin-bottom: 1em; } blockquote { margin: 0 5em 1em 5em; }
以下面的HTML片段为例:
当浏览器渲染元素时,它会查看所有样式表(浏览器,作者和用户)以查找匹配的规则,并确定哪一个是最重要的.对于此示例,作者样式表包含单个规则:
ul { color: Green; }
您的浏览器的内部样式表没有指定color
的值span
,所以它走了文档树,直到找到的东西,确实有一个color
定义的规则,在这种情况下ul
.
另一方面,当浏览器呈现元素时,它没有在用户或作者样式表中找到任何指定a的内容
color
,因此它使用浏览器样式表中的规则.
最终结果:绿色文字,蓝色链接.
额外信息:如果您使用的是Firefox,则可以通过粘贴resource://gre/res/html.css
到地址栏中查看(其中一个)内部css文件.(似乎直接超链接混淆了SO的降价引擎)