直接子 CSS 选择器问题

Question

请考虑以下 HTML :

<div class="mytest">
    <ul>
        <li>Parent 1</li>
        <li>Parent 2
            <ul>
                <li>Child 1</li>
                <li>Child 2</li>
                <li>Child 3</li>
            </ul>
        </li>
        <li>Parent 3</li>
    </ul>
</div>

我只想在 "parent" li 周围加上边框，而且我确信 CSS 可以解决问题：

.mytest > ul li {border : 1px solid #000;}

我读这个选择器为："select li which are children of a ul which is a direct children of a element with class mytest"。但是如果我使用它，"child" li 也会得到边框。 cfr this fiddle。有人可以解释为什么吗？我看不出任何原因，我可能在这里遗漏了一些重要的东西，因为我确信我之前已经成功地使用了这个选择器来达到同样的目的......

Answer 1

尝试

.mytest > ul > li {border : 1px solid #000;}

Answer 2

尝试像这样在 li 之前添加 > Demo

.mytest > ul > li {border : 1px solid #000;}

那么只有它会被视为 ul 的直接子代，并且样式只会应用于 li。希望这对您有所帮助！

Answer 3

您必须在 <ul> 和 <li> 之间添加直接子选择器，如下所示：

.mytest > ul > li {border : 1px solid #000;}

使用您的代码，您将 <ul> 元素中的所有 <li> 直接定位为 .mytest

的子元素

Answer 4

您的 select 或者，按照目前的情况，select 是您的 parent div 和 children 的直接列表15=]该列表的所有个后代项。

要使其 select 仅包含列表的直接后代的那些列表项，您必须添加另一个 child select 或者，像这样：

.mytest>ul>li

Answer 5

直接 child 选择器选择 parent 之后的直接 child 所以你的代码会像这样 -

.mytest 是parent 其直接child 是ul 而ul 直接children 是li

.mytext > ul > li {border : 1px solid #000;}

是正确的格式，如果你只想添加到第一个直接 child 你可以像

.mytest > ul > li:first-child {border : 1px solid #000;}

直接子 CSS 选择器问题

Direct child CSS selector issue

css

css-selectors