CSS каскад на дочерние элементы - PullRequest
Новая
       2

CSS каскад на дочерние элементы

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

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

Я столкнулся с небольшой проблемой каскадирования (я думаю) - это кажется мне очень элементарной проблемой, но я просто не могу найти простой способ сделать это. 

.red-content p {
  color: red;
}

.blue-content p {
  color: blue;
}
<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>

Вот кодекс, который иллюстрирует мою проблему: https://codepen.io/tomhayes/pen/OJVqKoo

По сути, синий текст должен быть синим, а красный текст должен быть красным, но правила конфликтуют и делают весь текст синим.

Я не могу использовать порядок правил CSS, чтобы добиться этого, потому что порядок элементы будут меняться, и я пытаюсь избежать необходимости использовать >, потому что элементы иногда должны быть вложены в несколько уровней.

Ответы [ 3 ]

1 голос
/ 01 апреля 2020

Вы добавите немного специфики в свой красный класс. 

.red-content:not(.blue-content) p {
  color: red;
}

.blue-content p {
  color: blue;
}
<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>

§ 4.3. Псевдокласс отрицания (без совпадений): :not()

Псевдокласс :not() позволяет записать бесполезных селекторов .

Для экземпляр :not(*|*), который вообще не представляет элемента, или div:not(span), что эквивалентно div, но с более высокой специфичностью.

1 голос
/ 01 апреля 2020

Вам нужно указать это только для абзацев? Если нет ... 

.red-content {
  color: red;
}

.blue-content {
  color: blue;
}
<div class="blue-content">
  <div class="inner">
    <p>Blue</p>
  </div>
  <div class="red-content">
    <div class="inner">
      <p>Red</p>
    </div>
  </div>
</div>
0 голосов
/ 01 апреля 2020

Проверьте размещение элементов div, вам не хватает одного для синего содержимого, и оно переопределяет красное содержимое.

Я добавил отступ, чтобы помочь выделить структуру. 

<div class="blue-content">
    <div class="inner">
        <p>Blue</p>
    </div>
</div>
<div class="red-content">
    <div class="inner">
        <p>Red</p>
    </div>
</div>
...