css - 覆盖伪元素子元素的最佳方法(例如，:before)

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 */
}

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