css 嵌套 ul 中的选择器

Question

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

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

<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" 的样式而不更改第二个的样式？它也总是改变第二个 "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

如果我 reset/revert 第二个 "ul" 元素的样式标签，我找到了解决方案。（在本例中是 "color" 标签）

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

似乎对我有用，如果这造成任何其他问题，请指正。

css 嵌套 ul 中的选择器

css selector in nested ul

css

nested

selector