css - CSS3 :not() 选择器

Question

在以下情况下，如何使用:not()排除div.note em 粗体？

div#content em {
    font-weight: bold;
}

/* I want to remove the following 
   in favor of the :not selector being applied to the above */
div#content div.note em {
    font-weight: normal;
}

PS：这是一个精简的示例，我实际上有许多样式div#content em，我想将其应用于除div.note em. 这就是为什么我不想稍后手动覆盖它们......

Answer 1

如果您知道#content和之间的确切层次结构.note，则可以使用子选择器使否定足够具体以起作用。如果.note是 的孩子#content，则使用：

#content > :not(.note) em, #content > em {}

如果and之间有两个<div>s ，请执行以下操作：#content.note

#content > div > div > :not(.note) em, #content > em {}

不过，您可能最好使用您拥有的东西，并且只是覆盖 .note 后代的 em 元素。