时间戳

首页 > 解决方案 > 后代的 CSS 选择器，我该如何选择它？

html - 后代的 CSS 选择器，我该如何选择它？

问题描述

这可能是一个非常愚蠢的问题，但我已经在网上四处寻找一段时间了，虽然我使用了正确的语法，但我的元素没有在 CSS 中被选中。

我制作了一个标准侧边栏，并使用 flexbox 将它放在屏幕右侧。我不是在寻找任何花哨的东西，但是当我将它重命名为一个类而不是选择备用选择器时，我的 CSS 坏了，因为我打算使用更多的备用元素并且不希望它们都具有相同的样式。

有谁知道如何解决？

.sidebar {
  flex: 1;
  background-color: white;
  align-self: stretch;
  border-left: 0.2em solid purple;
}

.sidebar h1 {
  margin: 1em;
  border-bottom: 0.2em solid purple;
}

.sidebar ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}
<aside class="sidebar">
  <h1>This is the sidebar.</h1>
  <p>Check out our awesome links!</p>
  <ul>
    <a href="home.html"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
  </ul>
</aside>

.sidebar 本身有效，但 .sidebar h1 和 .sidebar ul 无效。

标签： htmlcss

解决方案

我已经修好了。我在我的 css 文件的不同部分覆盖了我的样式。谢谢大家的建议。

推荐阅读