覆盖伪元素的子元素的最佳方法（例如：之前）

Question

我有一个非常复杂的下拉菜单，几乎每个部分和子部分都有不同的图标，这导致特殊性问题已经达到我发现难以控制的程度。

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

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

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

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

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

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

Answer 1

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

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

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

这仅适用于a:before的{​​{1}}直接子女的.t1规则，而不是所有这些规则。