如何使用querySelector中的模板文字来检测元素的类名

Question

我有两个导航框，第一个有一个CSS类.one，第二个为空。对于第一个导航框，我通过检测类名.one给出了一个带有JavaScript的边界。但我也得到了第二个导航框的边界，尽管它没有类。在这里，我使用模板文字的方法。我知道我可以直接在querySelectorAll方法中使用类名来解决这个问题，如下let li = document.querySelectorAll(".one > ul li");所示。但我需要模板文字解决方案，这对我使用其他项目也是最有用的。我主要需要将类名表示为一个变量。以下是我的代码。有人能帮我吗。提前感谢！

let parents = document.querySelector(".one");
let li = document.querySelectorAll(`${parents.tagName} > ul  li`);
li.forEach((elem)=>{elem.style.border="1px solid red"});

nav {font-family:arial;width:15rem;}
nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
nav ul a {color:#777;text-decoration:none;padding:.5rem;}

<nav class="one">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<br>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Answer 1

尝试替换此行：

let li = document.querySelectorAll(`${parents.tagName} > ul  li`);

这个：

let li = parents.querySelectorAll(`ul  li`);

它不能按预期工作的原因是，您正在使用document中的查询选择器nav > ul li匹配所有元素，并且您完全忽略了在parents变量中选择的nav标记的类名。

否则，你可以简单地这样做：

let li = document.querySelectorAll(`.one > ul  li`);
li.forEach((elem)=>{elem.style.border="1px solid red"}); 

或者只使用CSS:

.one > ul li {
border: 1px solid red;
}

或者如果你想选择第一个元素(我不知道你的意图是什么，但我根据你的代码猜测(：

.one:first-child > ul li {
border: 1px solid red;
}

Answer 2

不需要JavaScript。只有CSS才能实现。

.one > ul > li { border: 1px solid red}

或在您的JS更改中

let li = document.querySelectorAll(`${parents.tagName} > ul > li`);