"-6ren">
"-我以为下面的选择器只会匹配example b。有人可以向我解释一下 CSS 路径的工作原理吗? body div span a{ background:#000; color:#fff-6ren">
gpt4 book ai didi

html - 为什么我的 CSS 选择器 "body div span a"匹配 "

转载 作者:太空宇宙 更新时间:2023-11-04 14:22:26 33 4
gpt4 key购买 nike

我以为下面的选择器只会匹配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>

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

最佳答案

参见 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>直接后代的标签标签。

关于html - 为什么我的 CSS 选择器 "body div span a"匹配 "<body><div><span><span><a>",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8611920/

33 4 0