Question

我以为＆gt; selector只选择一个元素的直接子元素（不包括继承的属性），但下面的例子让我困惑：

<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”： enter image description here

我试图弄清楚规则是如何应用的，但我完全不明白：

项目1,2,3：得到所有的风格，因为他们是ul的直接孩子，并且是li

第4项：没有任何风格，因为它不是李

子项目2-2B：获取继承的颜色和字体样式，但不要获取边框样式。这是因为他们不是直接的孩子，还是因为他们不是李？

子项3a和3aa：得到所有的风格 - 为什么？他们不是ul的直接孩子。它看起来像＆gt;选择器命中所有相同类型的子项，直到它们被不同类型的项中断 - 这是正确的吗？

子项3aaa和3aaaa：不要获得边框样式，但仍然可以获得继承的颜色和字体样式。这是因为他们是具有这些风格的李子的孩子吗？这是为什么？

试图绕过这种行为。

Answer 1

如果不启动另一个<li>，您就无法在<li>内嵌套<ul>。浏览器会自动为您关闭<li>。

Answer 2

>表示任何元素，它是前一个元素的直接子元素。

左右....

ul li表示应选择ul内的任何li。

ul>li表示任何直接儿童，如<ul> <li>...＆amp;不像<ul> <li> <p> <li> this last li wont get the styles...

起初它很混乱，但很快变得清晰。

但是在你的情况下，因为你没有在开始另一个li之前使用ul或ol。浏览器添加一个。这使得间接li成为ul的孩子，因此它也被选中。

Answer 3

<li>具有可选的关闭代码，因此如果浏览器在相关<li>之前看到另一个</li>，则会隐式插入前一个代码的关闭。您可以使用浏览器开发人员工具中的DOM检查器对此进行验证。这意味着第3项的“子项目”实际上是第3项的兄弟。

DOM view

Answer 4

这是因为你有一个开放的li标签。假如你在项目3之后用</li>关闭项目3，而不是让它打开。然后ol不会变绿。但是b.c它们是开放的，ol是li的一部分。

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

Answer 5

可惜提交的html格式很糟糕，因为这只会让事情变得更加混乱。然而，即使形成良好，所有嵌套的lis仍将是绿色，但它们不会有边框。

为什么？

由于继承 - 颜色，字体大小和字体样式都是继承的属性 - border isn＆＃39; t。

这显示了直接子选择器的限制 - 您不能将其与继承的属性一起使用。

CSS：对＆gt;的行为感到困惑选择

5 个答案: