css与子选择器取代后来的css文件

o7jaxewo 于 12个月前发布在其他

关注(0)|答案(3)|浏览(93)

我有一个网站，其中某些装饰元素是由常规网站css和在某些情况下，一个自定义的css文件，是链接后，定期文件提供：

<link rel="preload" href="../../responsive.css" as="style" onload="this.rel='stylesheet'">
 <!--surface-->
 <link rel="preload" href="custom.css" as="style" onload="this.rel='stylesheet'">

我正在考虑添加一个按钮，通过调用JavaScript函数来消除responsive.css和custom.css提供的一些装饰元素。我计划实现的方法是加载样式表，但禁用它，这样它就成为堆栈中最新的样式表。此样式表的格式如下：

<link rel="preload" href="../../decoration_suppress.css" as="style" onload="this.rel='stylesheet'" disabled="disabled">

作为测试，我将该行插入到开发文件中，然后在Firefox的检查器中删除disabled="disabled"。它像我预期的那样工作，除了我在一个特定版本的custom.css上使用的一点CSS：

div[zonenum="EETS.QD.I"] > div.line > span.underline {
  text-decoration: underline overline red;
}

这段代码忽略了我在span. underline中将text-decoration更改为none的事实。我假设这是因为它非常具体，指的是页面上一个孩子的孩子，但我不确定。这是正确的吗？如果是的话，有没有一种方法可以让浏览器在decoration_suppress. css中尊重span.underline，而不是custom.css？我不能像我做decoration_suppress. css那样切换它，因为有一些自定义字体大小和布局问题，我需要使用这两种方式。
是的，我知道可能有一种更优雅的方式来做到这一点，即在一个css文件中标准化样式，但我的用例是试图模仿中世纪的手稿页面，它们并不总是遵循相同的样式模式。

css

来源：https://stackoverflow.com/questions/77292143/css-with-child-selectors-superceding-later-css-file

3条答案

按热度按时间

qlvxas9a1#

这在CSS中被称为specificity。
某些选择器比其他选择器有更多的“权重”，组合选择器也是如此-组合选择器包含的部分越多，它就变得越具体，仍然取决于所使用的选择器（标签，类，ID，伪类等）。
由此产生的特定性推翻了CSS规则在样式表中的顺序-只有当两个选择器具有完全相同的特定性时，顺序才重要。
作为覆盖更具体规则的“最后一个资源”，您可以始终将!important添加到值中，但通常不建议这样做。
你可以阅读一篇关于它的完整文章，包括这里有更高的特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

赞(0）回复(0）举报 12个月前

rjee0c152#

如果我对您的用例理解正确的话，那么您的样式表有一个明确的优先顺序。当加载并启用所有三个样式表时，无论样式表中的规则有何特殊性，
styles in decoration_suppress.css除以styles in custom.css除以styles in responsive.css。
是这样吗？
如果是这样，这是使用级联层的理想应用。你所要做的就是用@layer { ... } Package 每个样式表中的所有样式，并且样式表的优先级将被应用。
在下面的示例中，第一个链接样式表中的范围规则比第二个链接样式表中的范围规则具有更高的特异性。但是第二个样式表中的规则获胜，因为样式被 Package 在@layer规则中，因此决定因素是层出现的顺序。

<link rel=stylesheet href="data:text/css, @layer { span.colorme { color:red }}">
<link rel=stylesheet href="data:text/css, @layer { span { color:green }}">

<span class="colorme">hello world</span>

赞(0）回复(0）举报 12个月前

iszxjhcz3#

你是对的.对于.underline类你可以添加！如果你想覆盖特定的选择器，

赞(0）回复(0）举报 12个月前