CSS img 不是的直接子级

Question

我想选择 #boardMostra 的 img 子元素，但不是标签 a 的直接子元素。

我试过这个:

#boardMostra img :not(a img:first-child){
  ...
}

但它不起作用。

Answer 1

唯一可以使用的 css 方法是在 #boardMostra img 上设置属性并在 #boardMostra a > img 上中和它。

一个例子

<div>
    <img src="#" alt="#">
    <a href="#"><img src="#" alt="#"></a>
</div>

div img { margin: 10px 20px; }
div a > img { margin: 0; }

解释

为什么您的示例代码不起作用:

The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind.

:not matches an element that is not represented by the argument. The passed argument may not contain additonal selectors or any pseudo-element selectors.

来源:https://css-tricks.com/almanac/selectors/n/not/