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>

RichTextFX

Answer 1

CSS遵循css文档的流程，因此如果.dark位于CSS文件中的.light之后，则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

试试这个：

img

完整代码：

＆＃13;

.dark > p {
            color:#000;
         }


.light > p {
            color:#aaa;
         }

＆＃13;

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

＆＃13;

Answer 5

我通过稍微不同的方式设置 HTML 来解决这个问题。这为两个级别提供了足够的灵活性。

.light { color: black; background:lightgrey;}
.dark {color: grey; background: black;}
div.light {color: black}

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

嵌套的CSS类 - 要覆盖父类的子类？

5 个答案: