如何覆盖同一 id/类树的 CSS 后代

Question

如果问题非常基本，请原谅我，但我正在通过在线教程和模板学习 CSS，我无法解决这个疑问。

我有一些具有相同 id/类树的对象的标头后代。我想专门针对其中一个来改变他的格式。更具体地说，我的代码是：

<aside id="id-one" class="js-classone">
<div class="class-two js-classone">
<ul class="class-three">
<li>
<div class="class-four"></div>
<div class="class-five">
<div class="class-six  js-classone">
<div class="class-seven">
<h2 id="id-target">Targeted h2</h2>
<p class="class-eight">some text</p>    
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>  

在网络的其他部分(不是同一个文件.html，而是不同的文件)，h2不是目标(因此，没有id)，但它们在id和类的相同父/树下。

我的模板带有一些样式.css适用于此标题作为

#id-one .class-two .class-six > .class-seven .class-eight {
color: #fff;
}

如果我现在添加到我的风格中.css

#id-target {
color: #000;
}

出于某种原因，我不明白第一个 CSS 代码覆盖了 #id 目标的颜色。因此，我的问题：

#id-one .class-two .class-six>.class-seven .class-eight {
color: #fff;
}
#id-target {
color: #000;
}

<aside id="id-one" class="js-classone">
<div class="class-two js-classone">
<ul class="class-three">
<li>
<div class="class-four"></div>
<div class="class-five">
<div class="class-six  js-classone">
<div class="class-seven">
<h2 id="id-target">Targeted h2</h2>
<p class="class-eight">some text</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>

问题：你知道为什么 #id 目标不适用吗？为了格式化目标 h2，应该有人更改什么？

提前感谢，请纠正此问题中未充分提出的任何内容。

Answer 1

哦，天哪，有几个问题。

1. 您的p标记没有结束标记。
2. 您已关闭h2标记两次。
3. 您已对p标记应用了color: white;。
4. 您正在尝试将color: #000;应用于h2标记。

为了让您正确查看结果

1. 正确嵌套代码。
2. 关闭您打开的所有标签。
3. 在CSS中没有过于具体的选择器，即#id-one .class-two .class-six > .class-seven .class-eight可以简单地写成.class-eight(这是一个段落)。
4. 此外，作为一种很好的做法，为您的类和 ID 提供有意义的名称，以便它们描述您希望如何使用它们。

希望有帮助。