Question

在以下HTML代码段中：

<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

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

Answer 4

你的not选择器并不是你想要的;

.content *:not(.product) img

正在选择除class="product"以外的任何元素的子图片，自己 class="content"元素的子元素。

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

.content > img {}

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

<img class="contentImg">

.contentImg {}

Answer 5

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

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

Answer 6

您需要与.content和图像之间的级别一样多的规则

makemigrations

.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 { ... }

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)

};

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

7 个答案: