html - 选择所有选择器 CSS

Question

我一直在四处寻找，但找不到任何关于此的内容。我只在 JavaScript 或 jQuery 中找到了解决方案。

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

我正在努力积累关于我的 CSS 能力的知识，想知道这是否可以实现？

我想要实现的示例:(不是一个有效的示例 - 这是我目前所拥有的)

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 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>