CSS：页面上除特定元素的 children 之外的所有元素的样式？

Question

那么假设我有这段代码。格式化后，仅查看 js fiddle 本身发生了什么可能是最简单的。

这里有一些例子HTML:

<div>
  <h1>Anything outside of #keep-original should be set color: var(--colour-1) !important</h1>
</div>
<div id='keep-original'>
  <h1>Stuff inside #keep-original should keep original colour</h1>
</div>
<div>
  <h1>Anything outside of #keep-original should be set color: var(--colour-1) !important</h1>
</div>

:root {
  --colour-1: red;
}


/* invalid CSS
*:not(#keep-original *){
  color: var(--colour-1);
}
*/


/* formatting stuff */

* {
  margin: 0px;
  padding: 0px;
  color: white;
}

html {
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #222;
  height: 100%;
}

body>div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

div * {
  display: inline;
}

.c1,
.c1 * {
  color: #ff6500ff;
}

.c2,
.c2 * {
  color: #f0ff00ff;
}

.c3,
.c3 * {
  color: #1fc102ff;
}

.c4,
.c4 * {
  color: #02c1acff;
}

.c5,
.c5 * {
  color: #0f2bfdff;
}

.c6,
.c6 * {
  color: #fc0bbfff;
}

<div>
  <h4>Anything</h4>
  <h3>outside</h3>
  <h2>the</h2>
  <h1>middle</h1>
  <h1>div</h1>
  <h2>should</h2>
  <h3>be</h3>
  <h4>--colour-1</h4>
</div>
<div id='keep-original'>
  <h3 class='c1'>This</h3>
  <h2 class='c2'>text</h2>
  <h1 class='c3'>should</h1>
  <h2 class='c4'>be</h2>
  <h3 class='c5'>unaffected</h3>
  <h1 class='c6'>including
    <p>nested<span> elements<a> like<p> these</p></a></span></p>
  </h1>
</div>
<div>
  <h4>Anything</h4>
  <h3>outside</h3>
  <h2>the</h2>
  <h1>middle</h1>
  <h1>div</h1>
  <h2>should</h2>
  <h3>be</h3>
  <h4>--colour-1</h4>
</div>

假设我希望页面上的所有元素都具有某种颜色，特定元素 children 除外。例如，这显然设置了所有元素的颜色：

:root{
    --colour-1: red;
}

*{
     color: var(--colour-1) !important
 }

从逻辑上讲，我想做这样的事情（即“select 所有，除了 #keep-original 的 children”），但 [=38= 不支持]:

*:not(#keep-original *){
    color: var(--colour-1);
}

我意识到我可以在 JS 中轻松实现我想要的，例如将 .keep-original class 添加到 #keep-original 的所有 children，然后应用 css select 或 *:not(.keep-original) 的颜色样式，但是我想知道，是否可以在 css 中纯粹地做我想做的事？我觉得这应该是一件很容易做到的事情，所以也许我错过了一些非常明显的事情......

Answer 1

你很接近。 :not() 尽管有相关标准，但使用 ID 选择器的效果不如您预期的好。

这行不通：

*:not(#keep-original) * {
  color: var(--colour-1);
}

但是这样做：

div:not(#keep-original) * {
  color: var(--colour-1);
}

出于某种原因，您必须在 :not() 前加上比 * 更具体的前缀。

我建议您改用 class（无论如何这总是一个好主意）：

<div class='keep-original'>

然后这将起作用：

*:not(.keep-original) * {
  color: var(--colour-1);
}

CSS：页面上除特定元素的 children 之外的所有元素的样式？

CSS: styling ALL elements on a page EXCEPT the children of a specific elements?

css

children

element

selector