我认为下面的选择器只会匹配 example 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>
带有“这将受到影响”、“这不会”的视觉示例或更详细的树/路径对我非常有帮助。指向优秀指南的链接也可能很有趣。
【问题讨论】：
标签： html css css-selectors
请参阅W3C specification 了解更多信息。
为了简化您的示例，选择器div a { } 将匹配从<div> 标记下降 的任何<a> 标记，无论这两个标记分隔多少祖先级别。
也就是说，div a { } 将匹配以下任何一个：
<div> <a>...</a> </div>
<div> <h2> <a>...</a> </h2> </div>
<div> <h2> <span> <a>...</a> </span> </h2> </div>
如果您想匹配直接包含在<div> 中的<a>，并且没有其他标签将它们分开，您需要使用div > a，它只匹配作为直接后代的<a> 标签 em> 的 <div> 标签。
【讨论】：
a b c x>e>A>x>o>o>B>y>e>C 会起作用吗？
x>e>A>x>... 描述标签嵌套，那么是的。在模式匹配方面，a b c 就像匹配 *a*b*c。包含<a> 的任意数量的标签，<b> 以任意深度嵌套在其中，<c> 以任意深度嵌套在其中。另一方面，a > b > c 就像匹配 *a b c。
您的想法使用 CSS 中的 > 符号，它只获取直接子级。例如，body > div > span > a 会按照您的预期行事。
否则，将选择与选择器匹配的任何子项。所以div a 将选择div 下的任何a 元素，无论它位于多深的层级。
【讨论】：
a b c 是 CSS 选择器，是的，您会选择 C。不过，最好的建议是，如果您不确定，只需进行一些试验。这一切很快就会变得有意义。