Question

请原谅我，如果问题非常基础，但我通过在线教程和模板学习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>

在网络的其他部分（不是同一个文件.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

哦，小男孩，有几个问题。

您的p代码没有结束标记。
您已关闭h2代码两次。
您已将color: white;应用于p代码。
您正在尝试将color: #000;应用于h2代码。

为了让您正确看到结果

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

希望有所帮助。

如何覆盖相同id / class树的CSS后代

1 个答案: