CSS 优先级规则

2024-03-20

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

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

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

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

提前致谢, 大学教师


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

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>元素,它会查找所有样式表(浏览器、作者和用户)以查找匹配的规则弄清楚哪一个是最重要的 http://www.w3.org/TR/CSS2/cascade.html#cascade。对于此示例,作者样式表包含一条规则:

ul { color: Green; }

您的浏览器的内部样式表没有指定color价值span,所以它会沿着文档树向上走,直到找到符合以下条件的内容:does have a color规则定义,在本例中ul.

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 优先级规则 的相关文章

  • 如何在 Selenium WebDriver 中获取“ul”类的所有“li”元素

    我是 Selenium webdriver 的新手 我遇到了一个要求 我必须运行我的测试 单击一个部分中的所有链接 有人可以帮我解决这个问题的 Java 代码吗 附上一张显示该特定部分的萤火虫属性的图像 我已经尝试了下面的代码 但它返回了一
  • 如何使用 htaccess 重定向 html 扩展?

    目前 这两个链接显示同一页面 http www example com podcast episode html http www example com podcast episode html http www example com
  • 背景颜色的不透明度,但不是文本的不透明度[重复]

    这个问题在这里已经有答案了 如何使背景的跨浏览器 包括 Internet Explorer 6 透明div而文本仍然不透明 我需要在不使用任何库 例如 jQuery 等 的情况下完成此操作 但如果您知道有一个库可以实现此目的 我很想知道 这
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 有没有办法根据渲染的字符串创建 DOM 对象?

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串
  • TYPO3 显示子页面的内容,包括 css 类

    使用以下打字稿 我从一页上的子页面获取所有内容 lib allPid COA lib allPid 10 HMENU 10 special directory special value 2 1 TMENU 1 expAll 1 NO do
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • Firefox CSS 大纲错误?

    在 Chrome 和 IE9 上 我指定的 CSS 轮廓完全符合我的要求 并充当我正在设计的元素周围的第二个边框 但在 Firefox 上 轮廓会向外扩展 以便包含我生成的 after 伪元素以及主元素 这是一个错误 还是预期的 有什么好的
  • 将字符串转换为正确的 URI 格式?

    有没有简单的方法可以将电子邮件地址字符串转换为正确的 URI 格式 Input http mywebsite com validate email 3DE4ED727750215D957F8A1E4B117C38E7250C33 email
  • HttpWebRequest vs Webclient(特殊场景)

    我知道这个问题之前已经回答过thread https stackoverflow com questions 1694388 webclient vs httpwebrequest httpwebresponse 但我似乎找不到详细信息 在
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

随机推荐

  • 通用 DataRow 扩展

    我使用扩展方法来检查 DataRowField 是否为 null public static string GetValue this System Data DataRow Row string Column if Row Column
  • 如何使用 Dapper 扩展谓词实现“NOT IN”子句?

    我找到了如何实施IN使用 Dapper 扩展的子句here https stackoverflow com questions 49777139 how to implement in clause with dapper extensio
  • 临时 ASP.NET 文件丢失

    在我的asp项目中运行时抛出错误 昨天效果很好 但今天早上它自己给出了以下消息 Could not load file or assembly file C Windows Microsoft NET Framework v4 0 3031
  • 如何在单个事务下执行多个操作

    我有一个场景 需要将记录添加到表中 然后 如果添加了记录 则在云上创建资源 如果在云上创建资源 则使用资源标识符更新表中的记录 所以 它们是 3 个操作 当其中任何一个操作不成功时 我想恢复所有操作 我们一次性拥有用于多个数据库操作的 Tr
  • 如何调试我的 JavaScript 代码? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 当我发现我的代码片段有问题时 我应该如何调试它 Firebug http en wikipedia org wiki Firebug
  • jQuery/css/html:具有固定标题的可滚动表格[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道这个问题已经被问过好几次了 但我还找不到令人满意的 x 浏览器解决方案 我认为完成具有固定标题的可滚动表格的最简单方法应该是使用
  • SLF4J - 什么是悬挂或分离标记?

    在 SLF4J 中我不完全确定什么是分离标记 http www slf4j org apidocs org slf4j IMarkerFactory html getDetachedMarker 28java lang String 29是
  • 以编程方式确定 Android Wear 中的屏幕形状

    我正在寻找一种技术来确定 Java 中 Android Wear 设备屏幕是圆形还是矩形 请注意 这不仅仅涉及布局 还涉及布局 我的代码实际上需要知道它正在使用哪种形状 因为它们的处理方式不同 据我从在线代码示例中看到 两种不同的方法应该是
  • 我如何知道我的神经网络模型是否过度拟合(Keras)

    我使用 Keras 来预测输出是 1 还是 0 数据如下所示 funded amnt emp length avg cur bal num actv rev tl loan status 10000 5 60088 19266 2 1 13
  • 针对只读对象模型的 SqlAlchemy 优化

    我有一个复杂的对象网络 这些对象是使用 sqlalchemy ORM 映射从 sqlite 数据库生成的 我有很多深层嵌套 for parent in owner collection for child in parent collect
  • php mysql 错误 - #1273 - #1273 - 未知排序规则:'utf8mb4_general_ci'

    我刚刚安装了 PhpMyAdmin v4 1 5 仅英文版 我已将其设置为访问 2 台服务器 我的 PC 上的本地服务器和我的服务器上的远程服务器 对于我的本地电脑来说一切都很好 但是当我登录到远程服务器时 我收到了消息 Error MyS
  • 如何从 T-SQL 中的字符串中删除扩展 ASCII 字符?

    我需要从 T SQL 中的 SELECT 语句中过滤 删除 扩展 ASCII 字符 我正在使用存储过程来执行此操作 预期输入 eeee 预期输出 eeee 我所找到的一切都是为了MySQL https forums oracle com f
  • 如何使用 php 检查 smtp 服务器是否正常工作

    我想使用 php 检查我的网站 smtp 是关闭还是开启 我尝试使用 fsockopen 连接到服务器上的端口 25 然后当 smtp 服务运行时它返回 true 这是使用 php 脚本测试 smtp 或 ftp 是否运行的最佳方法 您正在
  • Groovy SQL Oracle 数组函数/过程输出参数注册

    我无法确定在使用存储的函数 过程时如何描述 注册数组输出参数 我需要传递多个数组输出参数以利用 Oracle 数据库中的 api 将参数中的数组发送到存储的函数 过程以及选择数组类型的单列到结果集中都有效 我认为在这种情况下 需要使用数据库
  • 为什么这种开关类型的情况被认为是令人困惑的?

    我一直在寻找一种重构和简化一个函数的方法 我必须根据输入类类型进行数据排序 并陷入困境switch input GetType 快速搜索让我找到了为什么 C switch 语句不允许使用 typeof GetType https stack
  • SQL:选择行不符合同一表内条件的事务

    我有一张包含交易的表 Transactions id account type date time amount 1 001 R 2012 01 01 10 01 00 1000 2 003 R 2012 01 02 12 53 10 15
  • Azure AD 多租户应用程序 - 限制可以注册的租户

    是否可以限制多租户 Azure AD 应用程序 以便只允许选定的少数租户注册 正如本文中提到的 Web 应用程序可以验证用户以检查颁发者值是否属于其批准的租户列表的一部分 然而 这种情况发生在用户已经注册其网络应用程序之后 是否可以将注册过
  • ZF2 模块最佳实践

    Zend Framework 版本 2 中的新模块系统公认的最佳实践是什么 我的目的是为应用程序的每个控制器创建一个模块 还是应该使用这些模块以某种方式将相关控制器及其模型分组在一起 See Rob Allens 模块简介 http akr
  • 如何根据条件(大于或小于)打印文本文件中的特定行/行

    我正在尝试编写一个程序 打印出特定行 行 其中一个值超过该行中的另一个值 例如 这是文本文件的一小部分 01 test1 202 290 A 290 02 test2 303 730 A 0 03 test3 404 180 N 180 我
  • CSS 优先级规则

    我的理解是样式表有 3 种类型 由页面作者定义 由用户定义 即由用户定义并安装到其浏览器中的一组默认样式 浏览器定义的默认样式表 根据如果某个元素与这些样式表中的任何一个选择器都不匹配 则只有这样 属性值才会从父元素继承 然而 这本书还说