如何覆盖相同id / class树的CSS后代[重复]

Question

这个问题在这里已有答案：

• Points in CSS specificity 7个答案

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

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

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

在Web的其他部分（不是相同的文件.html，不同的文件），h2不是目标（因此，没有id），但它们在id和类的相同父/树下。

我的模板带有一些style.css应用于此标题

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

如果我现在添加到我的style.css

#id-target {
  color: #000;
}

由于某种原因，我不明白第一个CSS代码会覆盖＃id-target的颜色。因此，我的问题：

#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-target不适用吗？为了格式化目标h2，有人应该改变什么？

在此先感谢，请更正此问题中没有充分询问的内容。

Answer 1

哦，男孩，几个问题。

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

为了让您正确地看到结果

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

希望有所帮助。