Question

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

由页面作者
由用户定义（即用户定义并安装到浏览器中的一组默认样式）
浏览器定义的默认样式表

根据this book，如果某个元素未与任何这些样式表中的选择器匹配，则只有这样才能从父元素继承属性值。但是，该书还说，浏览器的默认样式表应该为所有类型的元素定义样式。

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

提前致谢，唐

Answer 1

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

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值，因此它会在文档树中向上走，直到找到具有{{1}的内容为止已定义规则，在本例中为color。

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

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

奖励信息：如果您使用的是Firefox，则可以通过将color粘贴到地址栏中来查看（其中一个）内部css文件。（似乎直接超链接混淆了SO的降价引擎）

Answer 2

你是对的。样式表有三种来源。首先是浏览器样式，然后是用户（读者）样式，最后是作者样式;作者风格通常特朗普用户风格。如果稍后在影响它的级联（在用户或作者样式表中）定义样式，则将覆盖浏览器的默认样式表中定义的任何内容。如果由于作者编写的样式而有某些东西需要继承，那么它会覆盖默认样式，因为它是在级联中稍后定义的。

有关级联的详情，请转到here。

Answer 3

忽略覆盖所有内容的内联样式，如果多个类/选择器适用于页面元素，则最后定义的那个获胜（因为浏览器样式首先被定义，它们通常被覆盖）。当有一个类/选择器向下钻取所有层次结构时，就会发出警告。

这是一个示例表：

    <style type="text/css">
        #content
        {
            width: auto;
        }

        #content DIV.special
        {
            width: 200px;
            background: #999999;
            border: 2px dotted #000000;
        }

        #content DIV
        {
             width: 300px;
             border: 1px solid #CCCCCC;
        }



    </style>

给出以下HTML：

        <div id="content">
            <div class="special">
                should render 200px wide with a gray background and a dotted border
            </div>
            <div>
               should render 300px wide with a 1pt border
            </div>
        </div>

然后，如果您将此样式添加到工作表的底部：

    DIV
    {
        background: #CC9999;
    }

除了带有.special类的div（因为它更具体）之外，你将把所有东西变成浅紫色（因为它是带有颜色值的最后一个DIV）。

希望有所帮助。

Answer 4

从父母那里继承元素的样式可以有两种方式。首先，虽然浏览器可以为每个元素定义样式属性，但它们通常不会详尽地执行。因此，例如，“p”元素通常具有默认的上边距（以及其他），但是没有定义字体样式，因此在没有作者或用户规则的情况下，将从其父级继承。其次，可以在CSS的某些地方使用显式值“inherit”来指示渲染器从其父级采用该样式属性。过去在IE（我认为是表格单元格）中的位置是必要的，并且在覆盖级联中的早期规则时仍然如此。

Answer 5

正如我理解这个问题，你想知道一个非样式元素何时会采用浏览器样式表中定义的样式，而不是它采用其父样式的样式。这实际上是一个关于特异性而不是遗传的问题。拿这个过于明显和简单化的例子：

浏览器表
a { color: blue }

页面作者单
div { color: green }

<强> HTML
<div><a href="#">This is a link</a></div>

正如您所料，链接将是蓝色，而不是绿色，因为浏览器的规则更具体。它与继承无关，因为链接永远不会有继承的机会。元素样式流的优先级：

内联风格;你不能得到比这更具体的东西，它胜过一切（可能的例外是，如果！重要的是存在于相关规则上）
最具体的选择器（位于任何地方）;如同Rob Allen在本主题中描述的那样，无论它在继承结构中的哪个位置都将应用具有最高特异性的选择器
最近应用的选择器，然后解析继承树（文档中的样式标签=＆gt;作者工作表=＆gt;用户工作表=＆gt;浏览器工作表;请注意，在某些情况下用户工作表可能会覆盖作者工作表，但通常作者是权威的）
父级的属性样式（或者如果父级没有必需的属性，则在DOM上）;显然并非所有属性都是继承的

浏览器样式不会阻止父样式被继承的主要原因是浏览器样式通常非常稀疏，并且尽可能地将颜色，字体大小等内容定义为尽可能高的DOM树以使它们变得容易覆盖。如果你有一个浏览器定义了例如span元素的颜色，那么你可能会遇到试图获得继承的泛型div颜色的问题。

Answer 6

您可能还需要查看“特异性”

http://htmldog.com/guides/cssadvanced/specificity/

CSS优先规则

6 个答案: