html - CSS:对 > 选择器的行为感到困惑

Question

我以为 > 选择器只选择元素的直接子元素(不包括继承的属性)，但下面的例子让我感到困惑:

<ul>
    <li>Item 1</li>

    <li>Item 2
        <ol>Subitem 2
            <li>Subitem 2A</li>
            <li>Subitem 2B</li>
        </ol>
    </li>

    <li>Item 3
        <li>Subitem 3a
            <li>Subitem 3aa
                <ol>Subitem 3aaa
                    <li>Subitem 3aaaa
                    </li>
                </ol>
            </li>
        </li>
    </li>

    <ol>Item 4</ol>
</ul>

ul>li {
    color: green;
    font-style:italic;
    font-size:20px;
    border:5px solid red;
}

所以我尝试了一下，这是我在 Chrome“版本 30.0.1599.101 m”上看到的:

我试图弄清楚规则是如何应用的，但我并不完全理解:

元素 1、2、3:获取所有样式，因为它们是 ul 的直接子级并且是 li

元素 4:没有任何样式，因为它不是 li

子元素 2-2B:获取继承的颜色和字体样式，但不获取边框样式。这是因为他们不是直系子女还是因为他们不是李？

子元素 3a 和 3aa:获取所有样式 - 为什么？它们不是 ul 的直接子代。它看起来像 > 选择器命中所有相同类型的子元素，直到它们被不同类型的元素打断——这是正确的吗？

子元素 3aaa 和 3aaaa:不获取边框样式，但仍然获取继承的颜色和字体样式。这是因为他们是安里的子孙吗？这是为什么？

我只是想解决这个问题。

Answer 1

你不能嵌套 <li>在 <li> 内无需启动另一个 <ul> .浏览器正在关闭 <li>自动为您服务。