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

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

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

https://jsfiddle.net/5ge811g5/

Answer 2

我认为你可以使用 :only-child 伪 class.

参见参考文献：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>

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

CSS selector to match single list elements in a nested list

html

css

jquery

css-selectors

jquery-selectors