jquery - CSS 选择器匹配嵌套列表中的单个列表元素

Question

我有嵌套列表，类似于下面的列表:

<ol>
    <li>Item 1
        <ol>
            <li>Item 2</li>
            <li>Item 3
                <ol>
                    <li>Item 4
                        <ol>
                            <li>Item 5</li>
                        </ol>
                    </li>
                    <li>Item 6
                        <ol>
                            <li>Item 7</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

元素 1、5 和 7 都是单独的 <li>元素，即它们是该特定父级的层次结构级别中的唯一元素。我想匹配它们并用它们交换子弹元素。 (我也愿意接受 JavaScript 解决方案，但如果可能的话，我更喜欢纯 CSS。)

Answer 1

我认为你可以使用 :only-child 伪类。

参见引用资料:http://www.w3.org/TR/css3-selectors/#only-child-pseudo

这个技巧需要两条 CSS 规则。

ol li:only-child 规则可能会因继承而导致问题。

使用 li:only-child * 取消第一条规则的任何影响。

在这个例子中似乎工作正常。

ol li:only-child {
  font-weight: bold;
}
li:only-child * {
  font-weight: normal;
}

<ol>
    <li>Item 1
        <ol>
            <li>Item 2</li>
            <li>Item 3
                <ol>
                    <li>Item 4
                        <ol>
                            <li>Item 5</li>
                        </ol>
                    </li>
                    <li>Item 6
                        <ol>
                            <li>Item 7</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>