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 *取消第一条规则的任何效果。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

https://jsfiddle.net/5ge811g5/

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

2 个答案: