CSS - 如何定位第二个子列表项？

Question

我无法使用CSS儿童组合子选择器<li>定位<ul> <li>的另一个>的孩子。

我需要为这些列表项添加list_style_type:SomethingElse，为所有其他列表添加list-style-type: none;。

我已使用以下内容删除列表样式：

.snap-drawer ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

以下内容没有改变：

.snap-drawer ul > li {
    list-style-type: disc !important;
}

HTML：

<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

Answer 1

选项1

您要删除padding，然后bullet不可见。

同时定位ul内li项。尝试：

.snap-drawer ul > li > ul {
    padding-left:25px;
    list-style-type: disc !important;
}

.snap-drawer ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.snap-drawer ul > li > ul {
  padding-left: 25px;
  list-style-type: disc !important;
}

<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

---

选项2

您也可以尝试>选择器仅用于第一个ul：

.snap-drawer > ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.snap-drawer > ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

<div class="snap-drawer">
    <ul>
        <li class="li-item">...</li>
        <li class="li-item">...</li>
        <li class="li-item">
            <ul>
                <li class="li-item">...</li> <==== Target all these only
                <li class="li-item">...</li> <==== Target all these only
            </ul>
        </li>
    </ul>
</div>

Answer 2

你需要的是：

.snap-drawer ul ul > li {
    list-style-type: disc !important;
}

或更简单：

.snap-drawer ul ul li {
    list-style-type: disc;
}