Question

我喜欢更改嵌套未排序列表的样式。原始的HTML代码之前有更多的div标签，但这应该证明它：

.hwh ul
{
  font-weight: bold;
  margin-left: 0px;
  padding-left: 0px;
  list-style: none;
}

.hwh ul ul
{
  font-weight: none;
  padding-left:  1em;
  list-style: disc;
  background-color: #0f0;
}

<div class="hwh">
  <ul>
    <li>First Li</li>
    <li>Second Li</li>
    <ul>
      <li>Sub First Li</li>
      <li>Sub Second Li</li>      
    </ul>
  </ul>
</div>

是否有更简单的方法来更改第一个ul的样式而不恢复第二个样式？通常，对第一个ul的每次更改也会改变嵌套列表的样式。

Answer 1

其他人指出你不正确地嵌套列表。但是，由于外部列表根本没有项目符号，我的建议是使用不同的列表类型。只需将ul嵌套在ol内。

.hwh ol
{
  font-weight: bold;
  margin-left: 0px;
  padding-left: 0px;
  list-style: none;
}

.hwh ol ul
{
  font-weight: none;
  padding-left:  1em;
  list-style: disc;
  background-color: #0f0;
}

<div class="hwh">
  <ol>
    <li>First Li</li>
    <li>Second Li
      <ul>
        <li>Sub First Li</li>
        <li>Sub Second Li</li>      
      </ul>
    </li>
  </ol>
</div>

Answer 2

如果我重置/还原第二个“ ul”元素的样式标签，我找到了解决方案。（在这种情况下为“颜色”标签）

.ul-style ul
{
  list-style: none;
  color: green; /* should onyl be for the first ul level */
}

.ul-style ul ul
{
  padding-left: 1em;
  list-style: disc;
  color: initial; /* revert/reset the style from first ul */
}

<div class="ul-style">
  <ul>
    <li>First Li</li>
    <li>Second Li
      <ul>
        <li>Sub First Li</li>
        <li>Sub Second Li</li>      
      </ul>
    </li>
  </ul>
</div>

这似乎对我有用，如果这引起任何其他麻烦，请纠正我。

嵌套ul中的css选择器

2 个答案: