html - 嵌套 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

I approached this problem by setting up the HTML a bit differently. This gives enough flexibility for two levels.

.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>

Answer 5

尝试这个 ：

.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>