为伪元素覆盖子元素的最佳方法（例如，:before）答案

【问题标题】：Best way to overwrite child element for pseudo-elements (e.g., :before)为伪元素覆盖子元素的最佳方法（例如，:before）
【发布时间】：2014-09-27 20:24:03
【问题描述】：

我有一个非常复杂的下拉菜单，其中几乎每个部分和子部分都有不同的图标，这导致了我发现难以控制的特定性问题。

例如，在父菜单中，我有这样的东西：

ul.parent .t1 a:before {background-position: 12px -49px;width:34px;}

在.t1 的子菜单中，没有:before 伪元素，但它正在拾取父元素的伪元素。

我现在做的是向子 UL 添加一个新类，并声明它：

ul.sub-child li a:before {width:0!important}

由于菜单的复杂性，我想知道是否有一个聪明的方法来覆盖特异性。

【问题讨论】：

首先请注意，您可以通过content: none 声明删除生成的内容。其次，我会使用直接后代选择器 A > B 而不是后代选择器 A B，这将有助于区分嵌套元素。

标签： css pseudo-element css-specificity

【解决方案1】：

如果您只想设置元素的直接子元素的样式，请使用 child selector >。

在你的情况下，我不知道确切的 HTML 结构，但类似这样：

ul.parent .t1 > a:before {
    /* CSS rules */
}

这仅将规则应用于.t1 的直接子代的a:before，而不是所有这些子代。

【讨论】：