html - 使用 css 设置父列表样式

Question

对于下面的列表，我只想像我尝试使用的（第一个父级）一样设置父级列表的样式：

  ul < li {
    background-color: yellow;
  }

把这个不起作用，我该怎么做？

    <ul>
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>

Answer 1

让我们在这里明确一点，以防万一有人从搜索引擎中找到这个：CSS 中没有父选择器，甚至在 CSS3 中也没有。

检查本教程。

以下是关于它的讨论：是否有 CSS 父选择器？

Answer 2

您不能在 CSS 中定位父级。您应该只向它添加一个类并以这种方式使用它。

<li class="highlight">

-

.highlight {
    background-color: yellow;
}

或者，通过它在其父级中的位置来指定特定的 li。

li:nth-child(5) { /* assuming it's the 5th <li> in that list */
    background-color: yellow;
}

Answer 3

嗯，你可以使用一个类。

或者风格都像这样：

ul li { background-color: yellow; }
ul li ul li { background-color: none; }

我可能使用一个类

Answer 4

您需要应用一个类来识别您的“第一级”，如下所示：

<ul class="firstLevel">
  <li>first parent <!-- style this -->
    <ul>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
      <li>second</li>
    </ul>
  </li>
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
  <li>first parent</li> <!-- style this -->
</ul>

然后应用 css ：

/* ">" means only first level childs "li" will be concerned */
ul.firstLevel > li { 
  background-color: yellow;
}