小编mau*_*oc8的帖子

我有一种情况,我想要关注一个输入标签,如果它存在,或者它是容器,如果它没有.所以我想到了一种聪明的方式:

document.querySelector('.container input, .container').focus();

但有趣的是,querySelector总是会返回.container元素.

我开始调查并发现,无论放置不同选择器的顺序如何,querySelector总是返回相同的元素.

例如:

var elem1 = document.querySelector('p, div, pre');
var elem2 = document.querySelector('pre, div, p');

elem1 === elem2; // true
elem1.tagName;   // "P".

我的问题是:这种行为的"原因"是什么以及"规则"(如果有的话)使P元素优先于DIV和PRE元素.

注意:在上面提到的情况下,我提出了一个不太优雅但功能性的解决方案:

(document.querySelector('.container input') ||
 document.querySelector('.container')       ).focus();

Run Code Online (Sandbox Code Playgroud)