Вложенные CSS-классы - дочерний класс для переопределения родительского класса?

Question

Цель состоит в том, чтобы родительский элемент определял его стиль. Так .dark .light p будет иметь легкий текст, .dark p будет иметь темный текст, и .light .dark .light p будет иметь легкий текст.

p элемент может даже не быть прямым потомком .dark или же .light так .light .dark div.wrap div.inner p будет иметь темный текст.

Из-за каскадной природы CSS, кажется, предпочитает последнее правило. Это вообще возможно?

/* Doesn't work - switching the order isn't helpful
   as the opposite problem occurs */

.dark p {
  color: #000;
}
.light p {
  color: #aaa;
}
/* Works, but in my use case I need to specify attributes on 
   specific element. */

/* 
.dark {
  color: #000;
}

.light {
  color: #aaa;
} 
*/

/*  Works but not realistic if paragraph is nested deeper */

/*
.dark > p {
  color: #000;
}

.light > p {
  color: #aaa;
}
*/

/* Only works on the first two levels */

/* 
.dark p {
  color: #000;
}

.light p {
  color: #aaa;
}

.dark .light p {
  color: #aaa;
} 

.light .dark p {
  color: #000;
} 
*/

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

http://codepen.io/acondiff/pen/KaaqxP

Answer 1

CSS следует за документом CSS, поэтому, если .dark идет после .light в файле CSS любой элемент в вашем HTML с обоими классами всегда будет отображать .dark стиль.

.light {
  background: #ccc;
  }
.dark {
  background: #999;
  }

<p class="dark light">This will be dark  as it comes after light in the css file.</p>

!важный

Вы можете переопределить .dark стили, поставив !important на ваше .light стили.

.light {
  background: #eee !important;
  }
.dark {
  background: #999;
  }

<p class="light dark">This will be light as the light styles has !important</p>

В качестве альтернативы вы можете применить легкие стили ко всем элементам и просто переопределить элементы, которые вам нужны:

p {
  background: #eee;
}
.dark {
  background: #999;
}

<p>this will be light</p>

<p class="dark">this will be dark</p>

Answer 2

Попробуйте придать одинаковый цвет всем текстовым элементам.

Затем переопределяем цвет на светлый или темный.

body {
  color: red;
}
.light > p {
  color: blue;
}

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

Answer 3

Следующий код будет работать, покрывая вложенность кода.

.dark p {
    color: #000;
}
.light p {
    color: #aaa;
}

.dark .light>p{
    color:#aaa;
}
.light .dark>p{
    color: #000;
}

Answer 4

Попробуй это:

.dark > p {
            color:#000;
         }


.light > p {
            color:#aaa;
         }

Полный код:

.dark > p {
 color:#000;
}
   
.light > p {
 color:#aaa;
}

<div class="light">
  <p>Light text</p>
  <div class="dark">
    <p>Dark text</p>
    <div class="light">
      <p>Light text</p>
    </div>
  </div>
</div>

<div class="dark">
  <p>Dark text</p>
  <div class="light">
    <p>Light text</p>
    <div class="dark">
      <p>Dark text</p>
    </div>
  </div>
</div>

Answer 5

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