html三种选择器：HTML选择器全解析，从基础到实战应用

来源：网络作者：日期：2025-11-09 21:13:13

在前端开发中,选择器是CSS和JavaScript中不可或缺的一部分，它们决定了样式和脚本如何精准地应用到HTML元素上，本文将深入解析HTML的三种核心选择器，帮助初学者快速掌握选择器的使用方法和区别。

标签选择器

标签选择器是最基础的选择器类型,它通过HTML标签名称来选择元素，使用标签选择器时，所有匹配的元素都会应用相同的样式。

语法结构：

标签名 {
    /* 样式属性 */
    color: red;
    font-size: 16px;
}

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

在这个例子中,所有<p>标签内的文本都会显示为蓝色，并使用Arial字体。

类选择器

类选择器通过.class语法选择具有特定class属性的元素，一个元素可以拥有多个类，类选择器可以应用于多个元素，实现样式的复用。

语法结构：

.class名 {
    /* 样式属性 */
    background-color: yellow;
}

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个高亮段落。</p>
    <p class="highlight">这是另一个高亮段落。</p>
</body>
</html>

在这个例子中,所有带有class="highlight"的<p>元素都会应用黄色背景和粗体样式。

ID选择器

ID选择器通过#id名语法选择具有特定id属性的元素，每个HTML文档中，id属性必须是唯一的，因此ID选择器通常用于选择特定的、唯一的元素。

语法结构：

#id名 {
    /* 样式属性 */
    border: 2px solid black;
}

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #special {
            border: 2px solid black;
            padding: 10px;
        }
    </style>
</body>
<body>
    <p id="special">这是一个特殊段落。</p>
    <p class="highlight">这是另一个段落。</p>
</body>
</html>

在这个例子中,只有id="special"的<p>元素会应用黑色边框和内边距样式。

选择器类型	语法	匹配规则	特点
标签选择器	`标签名 {}`	所有同名标签	最基础的选择器
类选择器	`.类名 {}`	所有具有该类的元素	可应用于多个元素，支持多个类
ID选择器	`#id名 {}`	唯一具有该ID的元素	每个文档中ID唯一