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中定位父级。你应该只为它添加一个类并以这种方式使用它。

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

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

check this tutorial

以下是关于它的讨论：Is there a CSS parent selector?

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

使用css为父列表设置样式

4 个答案: