gpt4 book ai didi

CSS 继承 : Override an ID parent selector with a CLASS child

转载 作者:行者123 更新时间:2023-11-28 10:43:19 24 4
gpt4 key购买 nike

我浏览了几个关于 CSS 继承的主题,但没有人给我一个产生不良行为的特定用例的答案。

用一个简单的例子重现问题

<html>
<head>
<style>
#content a { color:red; } /* Theme selector (unmodifiable) */
a.child { color:blue; } /* Plugin selector */
</style>
</head>
<body>
<div id="content">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>
</body>
</html>

如您所知,ID 优先于 CLASS,因此第二条规则将被忽略。


真实用例问题描述

不幸的是,我在一个更复杂的用例中遇到了这个继承问题,其中包括 WordPress CMS。

的确,WordPress 包含一个称为主题的功能。主题是一种开发人员不太可能修改的包。此外,WordPress CMS 包含可插入主题的插件。

让我们想象一下 CSS 规则 #content a定义在主题样式表中,不能修改(我不想改变主题的样式,把#content改成.content例如...)。然后,第二条规则a.child是在我的插件上定义的,与之前的规则相反,它是可修改的。

换句话说,问题如下:

  • 我想覆盖第一条规则#content a通过将样式应用于 <a class="child">带有巧妙选择器的元素。真正的问题是我们是否能够共同找到打破 ID 优先级的解决方法。

我绝对不想使用:

  • Hacky 解决方案(例如 !important)
  • #content覆盖子选择器上的选择器,这将完全破坏我的插件的模块化。事实上,下面的选择器有效,但它的用法在我的代码中是完全不可想象的:#content a.child { color:blue; }

对于我的用例的复杂性,我深表歉意,但请帮助找到解决方案

最佳答案

我知道你说不 !important,但是如果父容器有 id,下面的代码会限制它的使用。我在设计 CMS 主题网站时也遇到过这个问题。

#content a { color:red; }   /* Theme selector (unmodifiable) */
a.child { color:blue; } /* Plugin selector */

[id] > a.child { color: blue !important; }
<div id="content">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>

关于CSS 继承 : Override an ID parent selector with a CLASS child,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31080179/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com