Question

我试图选择.container内的所有元素，但不包括.Head及其所有子项（以及子项的子项，等等）。

是否有一种方法可以使所有元素独立于其种类？像通配符*

// I know, this is not valid. What is the element that I can replace the (*)
.container *:not(:first-child) select {
    background: yellow;
}

红色轮廓内的所有项目均应从选择器中排除。我该怎么办？

.container :not(:first-child) {
  font-weight: bold;
  font-style: italic;
  background-color: yellow;
}
.Head {
  border: 2px dashed red;
}

<div class="container">
  <div class="Head" style="border: 2px dashed red;">
    Target to exclude from the selector
    <div>Target to exclude</div>
    <div>Target to exclude</div>
  </div>
  <p>Target to select<p>
  <ul>
    <li>Target to select</li>
  </ul>
  <h1>Target to select</h1>
  <p class="anotherparagraph">Target to select</p>
  <span>Target to select</span>
</div>

Answer 1

.container > *:not(.Head), .container > *:not(.Head) * {  }

...应该这样做。

Answer 2

您必须像示例中那样从CSS的容器中排除.Head类

.container > :not(.Head){
  font-weight: bold;
  font-style: italic;
  background-color: yellow;
}

.Head {
  border: 2px dashed red;
}

<div class="container">
  <div class="Head" style="border: 2px dashed red;">
    Target to exclude from the selector
    <div>Target to exclude</div>
    <div>Target to exclude</div>
  </div>
  <p>Target to select<p>
  <ul>
    <li>Target to select</li>
  </ul>
  <h1>Target to select</h1>
  <p class="anotherparagraph">Target to select</p>
  <span>Target to select</span>
</div>

我如何选择所有HTML元素，但不能选择第一个带有CSS选择器的元素

2 个答案: