CSS: 对 * 所有元素使用否定

Question

我想 select <article> 内而不是 <figure>

内的所有 <img> 元素

以下 2 个： How to create a css rule for all elements except one class?

https://www.w3.org/TR/css3-selectors/#negation

所有 <img> 都包裹在 <a> 或 <p> 中。似乎可以通过否定来完成。我现在的规则如下所示：

article *:not(figure) img { border: 2px solid red; }

关于为什么这不起作用的任何提示技巧？

Answer 1

它工作正常，但您是在告诉浏览器 img 元素必须用某物包装。所以直接在 article 标签内的 img 标签将不起作用，但是嵌套的任何东西，例如在 div 中将：

article *:not(figure) img { 
  border: 2px solid red; 
}

<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

您可能需要：

article *:not(figure) img,
article > img{ 
  border: 2px solid red; 
}

<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

请务必考虑评论中的建议，看看您的情况是否不允许使用不使用 * 通用和 :not 选择器的替代解决方案。例如。这可能要简单得多：

article img {
  border: 2px solid red; 
}

article figure img { 
  border: none; 
}

<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

但这对你是否有用取决于整个上下文。

CSS: 对 * 所有元素使用否定

CSS: using negation on * all elements

css

css-selectors

negation