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

Question

我无法定位 <li>的 <ul>那是另一个 child <li>使用 CSS 子组合器选择器 - > .

我需要添加 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 不可见。

同时将 li 元素内的 ul 作为目标。尝试:

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