Question

当我在elem.closest（）的括号中放置多个tagName和className时，如下所示

table.onclick = function(event) {  
      let target = event.target.closest('.none-class,none-elem,td,.none-class2,none-elem2'); 
      console.log(target);
}

即使类和标签除了'td'元素之外不存在。它总是返回'td'元素。据我了解，“ CSS选择器规则”表示，如果元素之间用逗号分隔，则表示“和”，因此它“选择所有元素”。在这里，逗号表示“或”。有人可以告诉我“ elem.closest（）”如何工作的逻辑吗？

Answer 1

.closest()将搜索祖先并返回与选择器相对应的第一个。

逗号表示“或” 。所以您的选择器如下：

给我第一个祖先：

具有“无类”课程 OR
是自定义HTML标签<none-elem> OR
是HTML标签<td> OR
具有“ none-class2”类 OR
是自定义HTML标签<none-elem2>

因此，最接近的祖先对应于选择器中的第三条规则。

如果要使用 AND 编写选择器，则必须编写类似td.none-class2或none-elem.none-class的东西。注意点之前没有空格

Answer 2

closest()-函数中的css选择器没有特殊含义。从逻辑上讲，css选择器中的逗号实际上始终表示“或”。因此，该规则将与以下任意一项匹配：

.none-class
none-elem
td
.none-class2
...

如果您希望它匹配例如仅当td具有.none-class时，使用：

td.none-class

作为选择器。阅读更多有关CSS选择器的信息。

Javascript：关于elem.closest（）的逻辑

2 个答案: