用于匹配嵌套列表中的单个列表元素的 CSS 选择器答案

【问题标题】：CSS selector to match single list elements in a nested list用于匹配嵌套列表中的单个列表元素的 CSS 选择器
【发布时间】：2015-06-08 12:12:12
【问题描述】：

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

<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。）

【问题讨论】：

您的意思是，第 2、5 和 7 项……对吗？（1 有一个嵌套列表）
不，我的意思是第 1、5 和 7 项。第 2 项和第 3 项与同一个父项处于同一级别。项目 1 在该级别上没有其他项目，即使它仍然有一个嵌套列表。

标签： jquery html css jquery-selectors css-selectors

【解决方案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>

【讨论】：

根据布局，OP 可能希望将选择器的范围缩小到ol > li:only-child 和li:only-child > ol，以免阻止继承。
@BoltClock 我喜欢你的建议，它制定了一套更清晰的规则。如果您有时间补充几句话，请随时编辑/改进答案。

【解决方案2】：

这是一个基于 jquery 的选择器，如果有用的话：

$('li').filter(function() { return $(this).siblings().length == 0 })

https://jsfiddle.net/5ge811g5/

【讨论】：