当前位置:  开发笔记 > 前端 > 正文

CSS优先规则

如何解决《CSS优先规则》经验,为你挑选了1个好方法。

我的理解是有3种类型的样式表:

由页面作者定义

由用户定义(即用户定义并安装到浏览器中的一组默认样式)

浏览器定义的默认样式表

根据本书,如果某个元素与任何这些样式表中的选择器不匹配,那么属性值才会从父元素继承.但是,该书还说,浏览器的默认样式表应该为所有类型的元素定义样式.

如果浏览器的样式表确实为所有类型的元素定义了样式,并且此样式具有比继承更高的优先级,则永远不应该遵循继承的属性值.显然情况并非如此,那么在浏览器的默认样式表中定义的属性和为父元素定义的属性的正确优先级规则究竟是什么?(我知道并非所有的CSS属性都继承了,但为了讨论起见,我假设我指的是一个属性,例如color)

唐先生,提前谢谢



1> Brant Bobby..:

浏览器没有为所有元素定义样式,只定义某些元素.简化的内部浏览器样式表可能如下所示:

a { color: blue; border-bottom: 1px solid blue }
p { margin-bottom: 1em; }
blockquote { margin: 0 5em 1em 5em; }

以下面的HTML片段为例:

  • Blah blah blah.
  • Foo

当浏览器渲染元素时,它会查看所有样式表(浏览器,作者和用户)以查找匹配的规则,并确定哪一个是最重要的.对于此示例,作者样式表包含单个规则:

ul { color: Green; }

您的浏览器的内部样式表没有指定color的值span,所以它走了文档树,直到找到的东西,确实有一个color定义的规则,在这种情况下ul.

另一方面,当浏览器呈现元素时,它没有在用户或作者样式表中找到任何指定a的内容color,因此它使用浏览器样式表中的规则.

最终结果:绿色文字,蓝色链接.

额外信息:如果您使用的是Firefox,则可以通过粘贴resource://gre/res/html.css到地址栏中查看(其中一个)内部css文件.(似乎直接超链接混淆了SO的降价引擎)

推荐阅读
手机用户2402851335
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有