Как применить класс css к элементу, но исключить вложенный / дочерний элемент того же стиля - PullRequest
Новая
       0

Как применить класс css к элементу, но исключить вложенный / дочерний элемент того же стиля

0 голосов
/ 06 апреля 2020

Привет. Я пытаюсь применить стиль к элементу body, но стиль не должен влиять на вложенный элемент, указанный селектором. Я пробовал с :not, но, похоже, он не работает для дочерних элементов. Вот мой пример: 

<!DOCTYPE html>
<html>
<head>
<style>
body:not(.not-disabled) {
  color: #ff0000;
  opacity: 0.4;
  pointer-events: none;
}
</style>
</head>
<body>

  <h1>This is a heading</h1>

  <p class="not-disabled">This is a paragraph.</p>
  <p class="not-disabled">This is another paragraph.</p>
  <button class="not-disabled">Enabled</button>
  <button>Disabled</button>
  <div>This is some text in a div element.</div>

</body>
</html>

Я бы ожидал, что параграфы не будут прозрачными. Также обе кнопки отключены, но я хотел бы, чтобы одна из них была включена, а именно: Ebabled , но мои ожидания оказались неверными.

Есть ли способ сделать это? Пожалуйста, не судите меня слишком сильно sh. Я новичок в CSS, и я погуглил, но не смог найти решение. Возможно, как новичок ie, мои вопросы неверны.

Ответы [ 2 ]

2 голосов
/ 06 апреля 2020

body:not(.not-red) означает, что стиль должен применяться к элементу тела, который не имеет класса .not-red.

То, что вам нужно, это применить этот стиль к дочерним элементам тела, поэтому добавьте пробел к селектору body :not(.not-red)

body :not(.not-red) {
/*  ^ note the space here */
  color: #ff0000;
}
<h1>This is a heading</h1>

<p class="not-red">This is a paragraph.</p>
<p class="not-red">This is another paragraph.</p>

<div>This is some text in a div element.</div>

В качестве альтернативы вы можете переопределить стиль, поскольку таблица стилей будет «читаться» сверху вниз. 

body {
  color: #ff0000;
}
.not-red {
  color: black;
}
<h1>This is a heading</h1>

<p class="not-red">This is a paragraph.</p>
<p class="not-red">This is another paragraph.</p>

<div>This is some text in a div element.</div>
0 голосов
/ 06 апреля 2020

Просто добавьте нужный цвет к вашему not-red классу 

body {
  color: #ff0000;
}

.not-red {
  color: #000000;
}

Стили работают каскадным способом. Вы можете установить цвет в элементе body по умолчанию, а затем указать другой цвет для указанных элементов c, если вы того пожелаете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...