【问题标题】：CSS Inheritance : Override an ID parent selector with a CLASS childCSS 继承：用 CLASS 子级覆盖 ID 父级选择器
【发布时间】：2015-06-26 18:48:33
【问题描述】：

我浏览了几个关于 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 是在主题 StyleSheet 中定义的，并且无法修改（我不想更改主题的样式并将 #content 更改为 .content 例如...）。然后，在我的插件上定义第二条规则a.child，与上一条规则相反，它是可修改的。

换句话说，问题如下：

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

我绝对不想用：

hacky 解决方案（如!important）
#content 覆盖子选择器上的选择器，这将完全破坏我插件的模块化。确实，以下选择器有效，但它的使用在我的代码中是完全不可想象的：#content a.child { color:blue; }

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

【问题讨论】：

#content a.child { color:blue; } 如何破坏代码中的模块化？
@AmmarCSE：它创建了一个依赖于在宿主 HTML 中有一个 ID 为 #content 的元素，这是插件不应该关心的。
@BoltClock，我明白了，但是 #content a.child, a.child 有什么问题？
@AmmarCSE：您将如何解释所有其他可能的 ID？没有通用 ID 选择器。而且您也不能假设针对该元素的最具体的规则也只会包含一个 ID 和一个类选择器。
之前曾使用过 WordPress 主题的样式，我感受到了您的痛苦。问题源于原作者首先根据 ID 对元素进行样式设置。我几乎总是不得不求助于使用!important 来解决这些类型的问题。

标签： css class inheritance modularity

【解决方案1】：

我知道你说不!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>

【讨论】：