目標は、要素の親にそのスタイルを指示させることです。その.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>