Question

我认为以下选择器只匹配示例b 。有人可以向我解释一下CSS路径的工作原理吗？

body div span a{
    background:#000;
    color:#fff;
}

<body>
    <div><span><span><a href="#">example a</a></span></span></div>
    <div><span><a href="#">example b</a></span></div>
    <span><div><span><a href="#">example c</a></span></div></span>
</body>

一个视觉示例或更详细的树/路径“这将受到影响”，“这不会”对我非常有帮助。指向优秀指南的链接也很有趣。

Answer 1

有关详细信息，请参阅W3C specification。

为了简化您的示例，选择器div a { }将匹配来自<a>标记的降序的任何<div>标记，无论多少级别的祖先分开这两个标签。

也就是说，div a { }将匹配以下任何内容：

<div> <a>...</a> </div>

<div> <h2> <a>...</a> </h2> </div>

<div> <h2> <span> <a>...</a> </span> </h2> </div>

如果您希望匹配<a>中直接包含的<div>而没有其他标记将其分开，则需要使用div > a，其中仅匹配<a>个标记是<div>标记的直接后代。

Answer 2

您的思维方式使用CSS中的>符号，该符号仅获得直接子项。例如，body > div > span > a会表现出您的期望。

否则，将选择与选择器匹配的任何子项。因此，div a会选择a下的任何div元素，无论其位置有多深。

为什么我的CSS选择器“body div span”匹配“<div> <span> <span> <a>"</a> </span> </span> </div>

2 个答案:

为什么我的CSS选择器“body div span”匹配“<div> <span> <span> <a>&#34;</a> </span> </span> </div>

2 个答案:

为什么我的CSS选择器“body div span”匹配“<div> <span> <span> <a>"</a> </span> </span> </div>