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>

我只想在“父”li周围放一个边框，我确信这个CSS可以解决问题：

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

我将此selctor读作：“select li，它们是ul的子级，它是类mytest的元素的直接子级”。但如果我使用它，“孩子”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;}

使用您的代码，您可以直接定位.mytest

中的<li>元素中的所有<ul>

Answer 4

您的选择器（如目前所示）选择父div的直接子项列表和该列表的所有后代项目。

要让它只选择那些直接后代的列表项，如果是列表，则必须添加另一个子选择器，如下所示：

.mytest>ul>li

Answer 5

直接子选择器选择跟随父项的直接子项，因此您的代码将如下所示 -

.mytest是父母，其直接孩子是ul，直接孩子是li

.mytext＆gt; ul＆gt; li {border：1px solid＃000;}

是正确的格式，如果您只想添加到您可以做的第一个直接孩子

.mytest＆gt; ul＆gt; li：第一个孩子{border：1px solid＃000;}

直接子CSS选择器问题

5 个答案: