Question

我一直在四处寻找，但却找不到任何相关信息。我只在JavaScript或jQuery中找到了解决方案。

我想知道是否有任何解决方案可以选择主包装内的所有元素？但是我还想用:not(:span)选择包装器内的所有跨距。

我试图建立我的CSS能力知识，并想知道这是否可以实现？

我想要实现的例子:(不是一个有效的例子 - 这是我到目前为止所做的事情）

＆＃13;

div#main-content > *{
  color: blue;
}

div#main-content > *:not(:span){
  color: green;
}

＆＃13;

<div id="main-content">
  <h1> Hello </h1>
  <p> Second </p>
  <p> Third </p>
  <span> Fourth </span>
  <h3> Fifth </h3>
</div>

＆＃13;

Answer 1

你快到了。从:中删除:span，您将选择不是span标记的每个元素。换句话说，使用选择器div#main-content > *:not(span)

div#main-content > *{
  color: blue;
}

div#main-content > *:not(span){
  color: green;
}

<div id="main-content">
  <h1> Hello </h1>
  <p> Second </p>
  <p> Third </p>
  <span> Fourth </span>
  <h3> Fifth </h3>
</div>

Answer 2

从:中删除:span。然后它会工作。 :保留:pseudo元素，例如:before或:checked等。

＆＃13;

div#main-content > *{
  color: blue;
}

div#main-content > *:not(span){
  color: green;
}

＆＃13;

<div id="main-content">
  <h1> Hello </h1>
  <p> Second </p>
  <p> Third </p>
  <span> Fourth </span>
  <h3> Fifth </h3>
</div>

＆＃13;

Answer 3

在：not（）内，无需使用：和选择器。所以请参阅附加的更新代码。

更新了代码

div#main-content>* {
  color: blue;
}

div#main-content>*:not(span) {
  color: green;
}

<div id="main-content">
  <h1> Hello </h1>
  <p> Second </p>
  <p> Third </p>
  <span> Fourth </span>
  <h3> Fifth </h3>
</div>