Вложенные CSS-классы - дочерний класс для переопределения родительского класса?
Цель состоит в том, чтобы родительский элемент определял его стиль. Так .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>
5 ответов
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>
Попробуйте придать одинаковый цвет всем текстовым элементам.
Затем переопределяем цвет на светлый или темный.
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>
Следующий код будет работать, покрывая вложенность кода.
.dark p {
color: #000;
}
.light p {
color: #aaa;
}
.dark .light>p{
color:#aaa;
}
.light .dark>p{
color: #000;
}
Попробуй это:
.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>
Я подошел к этой проблеме, немного по-другому настроив HTML. Это дает достаточную гибкость для двух уровней.