在 JavaScript 中使用 CSS 子选择器

在 JavaScript 中，我们可以使用 querySelector 和 querySelectorAll 来选取 DOM 元素，这两个方法支持使用 CSS 选择器来查询元素。

而 CSS 选择器中的子选择器，可以帮助我们更加精确地选择到需要的元素。

什么是 CSS 子选择器

CSS 子选择器是用来选取某个元素下的直接子元素的选择器。它使用 > 符号进行表示。

例如，下面的 CSS 规则选取了所有 ul 元素下的直接子元素 li：

ul > li {
  color: red;
}

这个规则表示，只有那些作为 ul 元素直接子元素的 li 元素，才会被应用红色文本颜色。

在 JavaScript 中使用 CSS 子选择器

在 JavaScript 中，我们同样可以使用 CSS 子选择器来选取元素。这需要使用 querySelector 或 querySelectorAll 方法，并将子选择器作为参数传入。

例如，下面的代码选取了第一个 div 元素下的直接子元素 p：

const firstDiv = document.querySelector('div:first-of-type');
const firstParagraph = firstDiv.querySelector('p:first-child');

可以看到，我们首先通过 querySelector 选取了第一个 div 元素，然后在这个元素上使用 querySelector 再次选取了它的第一个子元素 p。

如果我们要选取所有 ul 元素下的直接子元素 li，则可以使用 querySelectorAll：

const listItems = document.querySelectorAll('ul > li');

这个代码会选取文档中所有作为 ul 直接子元素的 li 元素。

总结

CSS 子选择器是用来选取某个元素下的直接子元素的选择器。我们可以在 JavaScript 中使用 querySelector 和 querySelectorAll 方法使用 CSS 子选择器来选取元素。

const element = document.querySelector('parent > child');
const elements = document.querySelectorAll('parent > child');

以上是在 JavaScript 中使用 CSS 子选择器的方法和示例。