使用CSS选择递归列表结构的最后一个子节点

Question

我想用css在最后<ul>内选择div.container <li>的最后一个元素。 嵌套的ul将达到n级，所以请告诉我是否可以使用jquery。

ul {
            list-style: none;
            margin: 0;
            padding: 0;
 }

<div class="container">
        <ul>
            <li>
                <ul>
                    <li>Nested Item</li>
                    <li>
                        <ul>
                            <li>Nested Item</li>
                            <li>
                                <ul>
                                    <li>Nested Item</li>
                                    <li>
                                        <ul>
                                            <li>Nested Item</li>
                                            <li>
                                                <ul>
                                                    <li>Nested Item</li>
                                                    <li>Want to select list with css</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

view the image that i want to select with css

Answer 1

您可以使用一些技巧来制作它。

如果您正在寻找最后一个元素，那么您可以使用：nth-​​last-child（n）选择器，这匹配第n个子元素中的每个元素，并且它不会查找类型或其父母。

这是从最后一个孩子算起的。

.container ul li:nth-last-child(1)
{
    color: red;
    font-size:22px;
}
.container li li {
    color: green;
    font-size:12px;
}

看这里：     MyFiddel