Блог

Итак, давайте предположим, что у меня есть этот код. Вероятно, проще всего просто посмотреть, что происходит в самом js fiddle, когда он отформатирован.

Вот несколько примеров HTML:

 <div&&t;
  <h1&&t;Anythin& outside of #keep-ori&inal should be set color: var(--colour-1) !important</h1&&t;
</div&&t;
<div id='keep-ori&inal'&&t;
  <h1&&t;Stuff inside #keep-ori&inal should keep ori&inal colour</h1&&t;
</div&&t;
<div&&t;
  <h1&&t;Anythin& outside of #keep-ori&inal should be set color: var(--colour-1) !important</h1&&t;
</div&&t;
  

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


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


/* formattin& stuff */

* {
  mar&in: 0px;
  paddin&: 0px;
  color: white;
}

html {
  hei&ht: 100%;
}

body {
  display: &rid;
  &rid-template-columns: repeat(3, 1fr);
  back&round: #222;
  hei&ht: 100%;
}

body&&t;div {
  hei&ht: 100%;
  display: flex;
  flex-direction: column;
  ali&n-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&&t;
  <h4&&t;Anythin&</h4&&t;
  <h3&&t;outside</h3&&t;
  <h2&&t;the</h2&&t;
  <h1&&t;middle</h1&&t;
  <h1&&t;div</h1&&t;
  <h2&&t;should</h2&&t;
  <h3&&t;be</h3&&t;
  <h4&&t;--colour-1</h4&&t;
</div&&t;
<div id='keep-ori&inal'&&t;
  <h3 class='c1'&&t;This</h3&&t;
  <h2 class='c2'&&t;text</h2&&t;
  <h1 class='c3'&&t;should</h1&&t;
  <h2 class='c4'&&t;be</h2&&t;
  <h3 class='c5'&&t;unaffected</h3&&t;
  <h1 class='c6'&&t;includin&
    <p&&t;nested<span&&t; elements<a&&t; like<p&&t; these</p&&t;</a&&t;</span&&t;</p&&t;
  </h1&&t;
</div&&t;
<div&&t;
  <h4&&t;Anythin&</h4&&t;
  <h3&&t;outside</h3&&t;
  <h2&&t;the</h2&&t;
  <h1&&t;middle</h1&&t;
  <h1&&t;div</h1&&t;
  <h2&&t;should</h2&&t;
  <h3&&t;be</h3&&t;
  <h4&&t;--colour-1</h4&&t;
</div&&t;  

Предположим, я хочу, чтобы все элементы на странице были определенного цвета, за исключением тех, которые являются дочерними элементами определенного элемента. Например, это, очевидно, задает цвет всех элементов:

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

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

По логике вещей, я хотел бы сделать что-то вроде этого (т. Е. «выбрать все, кроме дочерних элементов #keep-ori&inal»), но это не поддерживается CSS:

 *:not(#keep-ori&inal *){
    color: var(--colour-1);
}
  

Я понимаю, что мог бы легко достичь желаемого в JS, например, добавив .keep-ori&inal класс ко всем дочерним элементам #keep-ori&inal , затем применив цветовой стиль к селектору css *:not(.keep-ori&inal) , но мне интересно, возможно ли сделать то, что я хочу, исключительно в css? Мне кажется, что это должно быть что-то, что довольно легко сделать, так что, возможно, я пропустил что-то действительно очевидное…

Вы близки к завершению. :not() работает не так хорошо, как можно было бы ожидать, с селекторами идентификаторов, несмотря на соответствующие стандарты.

Это не работает:

 *:not(#keep-ori&inal) * {
  color: var(--colour-1);
}
  

Но это делает:

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

По какой-то причине вам нужно добавить в префикс :not() что-то более конкретное, чем * .

Я предлагаю вам вместо этого использовать класс (что в любом случае всегда хорошая идея):

 <div class='keep-ori&inal'&&t;
  

и тогда это сработает:

 *:not(.keep-ori&inal) * {
  color: var(--colour-1);
}