在 Web 开发中，选择器（Selector）是核心概念之一。在 CSS 中，选择器用于定位 HTML 元素以便应用样式；在 JavaScript 中，选择器则用于获取 DOM 元素节点进行操作。本文将从 CSS 选择器 与 JavaScript 选择器 两个维度进行详细介绍。

CSS 选择器

CSS 选择器是 CSS 规则集的一部分，用于指定需要应用样式的 HTML 元素。根据特性与功能的不同，主要可分为以下几类：

1. 元素选择器（Element Selector）

通过 HTML 标签名称来选择元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 选择所有的 p 元素 */
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

在上述代码中，p 即为元素选择器，它会选中页面中所有的 <p> 元素，并将文本颜色设置为蓝色。

2. 类选择器（Class Selector）

通过元素的 class 属性值来选择元素。类选择器以点号（.）开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 选择所有 class 为 highlight 的元素 */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个高亮的段落。</p>
    <span class="highlight">这是一个高亮的文本。</span>
</body>
</html>

.highlight 是类选择器，它会选中所有 class 属性值为 highlight 的元素，并将背景颜色设置为黄色。

3. ID 选择器（ID Selector）

通过元素的 id 属性值来选择元素。ID 选择器以井号（#）开头。注意：每个 HTML 元素的 id 属性值在页面中应该是唯一的。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 选择 id 为 main-heading 的元素 */
        #main-heading {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1 id="main-heading">这是主标题</h1>
</body>
</html>

#main-heading 是 ID 选择器，它会选中 id 属性值为 main-heading 的元素，并将其字体大小设置为 24 像素。

4. 属性选择器（Attribute Selector）

根据元素的属性及其值来选择元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 选择所有带有 title 属性的元素 */
        [title] {
            border: 1px solid red;
        }
        /* 选择所有 type 属性值为 text 的 input 元素 */
        input[type="text"] {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <a href="#" title="点击这里">链接</a>
    <input type="text" placeholder="输入文本">
    <input type="password" placeholder="输入密码">
</body>
</html>

代码中，[title] 选择了所有带有 title 属性的元素，而 input[type="text"] 则专门选择了 type 属性值为 text 的 <input> 元素。

5. 伪类选择器（Pseudo-class Selector）

用于选择处于特定状态的元素（如鼠标悬停、链接已访问等）。伪类选择器以冒号（:）开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 鼠标悬停在链接上时的样式 */
        a:hover {
            color: red;
        }
        /* 已访问链接的样式 */
        a:visited {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</body>
</html>

a:hover 选择鼠标悬停状态下的 <a> 元素，a:visited 选择已经被访问过的 <a> 元素。

6. 组合选择器（Combinator Selector）

可以将多个选择器组合使用，以更精确地定位元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 选择所有 div 元素内的 p 元素 */
        div p {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <p>这是 div 内的段落。</p>
    </div>
    <p>这是 div 外的段落。</p>
</body>
</html>

div p 是后代选择器，它会选中所有位于 <div> 元素内部的 <p> 元素。

JavaScript 中的选择器

在 JavaScript 中，可以通过 DOM API 使用选择器来获取 HTML 元素节点，主要方法如下：

1. document.getElementById()

通过元素的 id 属性值获取单个元素节点。

<!DOCTYPE html>
<html lang="en">
<body>
    <h1 id="my-heading">这是一个标题</h1>
    <script>
        const heading = document.getElementById('my-heading');
        heading.style.color = 'red';
    </script>
</body>
</html>

document.getElementById('my-heading') 返回 id 为 my-heading 的 <h1> 元素节点，随后将其文本颜色设置为红色。

2. document.getElementsByClassName()

通过元素的 class 属性值获取元素节点集合（HTMLCollection）。

<!DOCTYPE html>
<html lang="en">
<body>
    <p class="my-paragraph">这是一个段落。</p>
    <p class="my-paragraph">这是另一个段落。</p>
    <script>
        const paragraphs = document.getElementsByClassName('my-paragraph');
        for (let i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = 'blue';
        }
    </script>
</body>
</html>

document.getElementsByClassName('my-paragraph') 返回所有 class 为 my-paragraph 的元素节点集合，代码遍历该集合并将每个元素的文本颜色设置为蓝色。

3. document.getElementsByTagName()

通过标签名称获取元素节点集合。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <script>
        const paragraphs = document.getElementsByTagName('p');
        for (let i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = 'green';
        }
    </script>
</body>
</html>

document.getElementsByTagName('p') 返回所有 <p> 元素节点集合，随后遍历并将颜色设置为绿色。

4. document.querySelector() 和 document.querySelectorAll()

这两个方法支持使用 CSS 选择器语法来获取元素：

  • document.querySelector()：返回匹配指定选择器的第一个元素节点。
  • document.querySelectorAll()：返回匹配指定选择器的所有元素节点列表（NodeList）。
<!DOCTYPE html>
<html lang="en">
<body>
    <p class="my-paragraph">这是一个段落。</p>
    <p class="my-paragraph">这是另一个段落。</p>
    <script>
        // 获取第一个 class 为 my-paragraph 的元素
        const firstParagraph = document.querySelector('.my-paragraph');
        firstParagraph.style.color = 'red';

        // 获取所有 class 为 my-paragraph 的元素
        const allParagraphs = document.querySelectorAll('.my-paragraph');
        for (let i = 0; i < allParagraphs.length; i++) {
            allParagraphs[i].style.backgroundColor = 'lightgray';
        }
    </script>
</body>
</html>

代码中，document.querySelector('.my-paragraph') 仅返回第一个匹配的元素节点，而 document.querySelectorAll('.my-paragraph') 返回所有匹配的元素节点列表。