html - CSS 优先级规则

标签 html css

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

  • 由页面作者定义
  • 由用户定义(即一组由用户定义并安装到他们的浏览器中的默认样式)
  • 浏览器定义的默认样式表

根据 this book如果元素与这些样式表中的任何一个中的选择器都不匹配,则属性值才会从父元素继承。然而,这本书还说浏览器的默认样式表应该为所有类型的元素定义一个样式。

如果浏览器的样式表确实为所有类型的元素定义了一种样式,并且这种样式的优先级高于继承,那么继承的属性值永远不会被观察到。显然情况并非如此,那么浏览器默认样式表中定义的属性和为父元素定义的属性的正确优先级规则到底是什么? (我知道并非所有的 CSS 属性都会继承,但为了讨论起见,假设我指的是一个属性,例如 color)

提前致谢, 唐

最佳答案

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

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 的值, 所以它沿着文档树向上走,直到它找到确实color 的东西规则已定义,在本例中为 ul .

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

最终结果:绿色文本,蓝色链接。

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

关于html - CSS 优先级规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/498069/

相关文章:

jquery - 使用 jQuery 和绝对定位的 div 用于下拉菜单。当光标仍在 div 上时停止隐藏菜单

javascript - 将新 CSS 类应用于遗留数据的最佳实践

javascript - 我不明白为什么我的 JQuery UI 菜单中的幻灯片缺少几个像素

javascript - 如何仅在较小的屏幕尺寸上使用 jQuery appendTo,但在较大的屏幕上返回正常位置

html - IE中旋转图片的宽度问题

javascript - 带有 css3 转换的 Jquery ui 可排序问题

html - 非常小的 div 与悬停对齐不起作用

html - vmax 单元在 IE 中不工作

html - 带有文本下方复选框的自定义复选框

javascript - 如何在没有 JavaScript 的情况下在流体容器中垂直居中文本?