CSS优先级规则 [英] CSS precedence rules

问题描述

我的理解是，有三种类型的样式表：

• 由页面作者定义


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


• 由浏览器定义的默认样式表






根据本书如果元素在这些样式表中没有与选择器匹配，属性值从父元素继承。然而，该书还说，浏览器的默认样式表应该为所有类型的元素定义样式。





如果浏览器的样式表确实为所有类型的元素定义了样式，并且此样式的优先级高于继承，那么永远不应遵守继承的属性值。很明显，情况并非如此，因此，在浏览器的默认样式表中定义的属性和为父元素定义的属性的正确优先级规则是什么？ （我知道不是所有的CSS属性继承，但为了讨论的缘故假设我指的是一个属性，例如 color ）





提前感谢
Don

解决方案

为所有元素定义样式，只有某些元素。简化的内部浏览器样式表可能如下所示：

  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> 元素，它看起来通过所有样式表（浏览器，作者和用户）查找匹配的规则和找出哪一个是最重要的。对于此示例，作者样式表包含一条规则：

  ul {color：Green; } 
  

您的浏览器的内部样式表未指定颜色 value span ，所以它沿着文档树向上走，直到找到 有颜色





另一方面，当浏览器呈现< a> 元素，它在用户或作者样式表中找不到任何指定颜色因此它使用在浏览器样式表中找到的规则。





最终结果：绿色文本，蓝色链接。





奖金信息：如果您使用的是Firefox，您可以通过粘贴 resource：//gre/res/html.css 进入地址栏。 （似乎一个直接的超链接混淆了SO的降价引擎）




My understanding is that there are 3 types of stylesheet:

• Defined by the page author
• Defined by the user (i.e. a set of default styles defined by the user and installed into their browser)
• Default stylesheet defined by the browser

According to this book if an element is not matched by a selector in any of these stylesheets, only then will the property value be inherited from parent elements. However, the book also says that a browser's default stylesheet should define a style for all types of elements.

If a browser's stylesheet does define a style for all types of element, and this style has a higher precendence than inheritance, then inherited property values should never be observed. Clearly this is not the case, so what exactly are the correct precedence rules for properties defined in a browser's default stylesheet and those defined for parent elements? (I'm aware that not all CSS properties inherited, but for the sake of this discussion assume I'm referring to a property that is, e.g. color)

Thanks in advance, Don

解决方案

The browser doesn't define a style for all elements, just certain ones. A simplified internal browser stylesheet might look like this:

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

Take the following snippet of HTML as an example:

<ul>
  <li>
    <span>Blah blah blah.</span>
  </li>
  <li>
    <a href="about:">Foo</a>
  </li>
</ul>

When the browser goes to render the <span> element, it looks looks through all the stylesheets (browser, author, and user) for rules that match and figures out which one is the most important. For this example, the author stylesheet contains a single rule:

ul { color: Green; }

Your browser's internal stylesheet doesn't specify a color value for span, so it walks up the document tree until it finds something that does have a color rule defined, in this case ul.

On the other hand, when the browser renders the <a> element, it doesn't find anything in the user or author stylesheets specifying a color, so it uses the rule found in the browser stylesheet.

The end result: Green text, blue link.

Bonus information: If you're using Firefox, you can view (one of) its internal css files by pasting resource://gre/res/html.css into the address bar. (It seems a direct hyperlink confuses SO's markdown engine)

这篇关于CSS优先级规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！