CSS选择器排除DIV元素的内容？

Question

在以下 HTML sn-p 中：

<div class="content">
  <p>Lorem ipsum</p>
  <img src="path/to/image.jpg" />
  <div class="product">
    <p>Dolor sit amet</p>
    <img src="path/to/another/image.jpg" />
  </div>
</div>

我需要一个 CSS 选择器来选择和设置第一个图像（.content div 元素中的那个）而不是第二个（.product div 元素中的那个）的样式。

我已经使用 :not() 否定伪类进行了几轮，但类似

.content *:not(.product) img

似乎没有用（可能是因为我把语法混了）。

如何选择 .content div 中任意位置的所有图像，但排除 .product div 中任意位置的所有图像？请注意，多个 div 可能嵌套在不同级别，因此我不能引用 .content div 的特定子级。

Answer 1

使用.content > img 仅选择.content 的直接子代

这不包括.product 中的图片。

Answer 2

第一张图片与您的选择器不匹配，因为它需要一个元素作为介于 .content 和 img 之间的中间层（并且其类不得为 .product），因此您可以改写

:not(.product) > img {

}

Answer 3

您实际上需要 两个 选择器，其中一个您已经拥有。那一个必须由另一个也找到直接子 img 的 .content 的补充：

.content > img, .content *:not(.product) > img { ... }

Answer 4

使用.content >img。希望这对您有用。

Answer 5

您的not 选择器并没有完全按照您的意愿行事；

.content *:not(.product) img 

正在选择属于任何元素的子元素的图像，class="product" 除外，这些元素本身是class="content" 元素的子元素。

但是，在您的代码中，您要选择的图像不是.content 的孙子；这是一个直接的孩子。假设您的标记结构不会改变，您可以使用direct descendant selector 来实现您想要的：

.content > img {}

或者，你可以给你想要的图像选择一个类名，然后选择那个类，比如：

<img class="contentImg">

.contentImg {}

Answer 6

您需要尽可能多的规则，就像 .content 和图像之间的级别一样

.content > span,
.content > :not(.product) > span,
.content > :not(.product) > :not(.product) > span,
.content > :not(.product) > :not(.product) > :not(.product) > span
{
  background-color: lightblue;
  }

<div class="content">
  <p>Lorem ipsum</p>
  <span>YES</span>
  <div class="product">
    <p>Dolor sit amet</p>
    <span>NO</span>
  </div>
</div>

类似解决方案的问题

.content *:not(.product) > img { ... }

是否会匹配后代的序列

.content > .product > anything > img

Answer 7

试试这个：

HTML: 添加了 id="image1"

<div class="content">
  <p>Lorem ipsum</p>
  <img id="image1" src="path/to/image.jpg" />
   <div class="product">
    <p>Dolor sit amet</p>
    <img src="path/to/another/image.jpg" />
  </div>

CSS：添加 ID 选择器

#image1{
width:100% (example)

};