html选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_81621310/article/details/143742959

1. 元素选择器（Element Selector）

1.1 语法

元素选择器（又称标签选择器）是最基本的选择器，它直接根据HTML标签的名称来选取元素。使用元素选择器时，只需指定标签名称即可。

tagname {
    /* 样式规则 */
}

1.2 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器示例</title>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

在上面的例子中，p 是元素选择器，它选中了页面中的所有 <p> 标签，并为它们应用了蓝色文字颜色和16px字体大小。

2. 类选择器（Class Selector）

2.1 语法

类选择器是通过HTML元素的 class 属性来选择特定的元素。类选择器的语法以点（.）开头，后面跟上类名。

.classname {
    /* 样式规则 */
}

2.2 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器示例</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }

        .important {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个高亮文本。</p>
    <p class="important">这是一个重要文本。</p>
</body>
</html>

在这个例子中，.highlight 和 .important 是类选择器，分别给具有相应 class 的元素应用不同的样式。

2.3 应用场景

类选择器非常适用于对一组相同类型的元素应用不同的样式。在开发中，我们可以根据不同的业务需求，动态地为元素添加不同的类，从而改变它们的外观。例如，为所有重要的文本添加 .important 类，而为高亮显示的文本添加 .highlight 类。

3. ID选择器（ID Selector）

3.1 语法

ID选择器是通过HTML元素的 id 属性来选择特定的元素。ID选择器的语法以井号（#）开头，后面跟上元素的 id 名称。

#idname {
    /* 样式规则 */
}

3.2 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器示例</title>
    <style>
        #header {
            background-color: #333;
            color: white;
            padding: 10px;
        }

        #footer {
            background-color: #222;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="header">
        这是网站的头部
    </div>
    <div id="footer">
        这是网站的底部
    </div>
</body>
</html>

在这个例子中，#header 和 #footer 是ID选择器，分别用于选中 id="header" 和 id="footer" 的元素，并为它们添加背景颜色、字体颜色和内边距样式。

3.3 应用场景

ID选择器在页面中是唯一的，因此每个 id 值只能出现在页面中一次。它通常用于选中页面中的唯一元素，如头部、底部、导航栏等。由于ID选择器的优先级较高，因此它适用于对单个元素应用特别样式。

总结

4.1 各选择器的优缺点

选择器	语法	优点	缺点
元素选择器	`tagname {}`	简单直观，易于全局样式设置	可能导致样式冲突，影响所有相同标签元素
类选择器	`.classname {}`	灵活且可重用，适用于多个元素	需要合理命名，避免命名冲突
ID选择器	`#idname {}`	高优先级，适用于唯一元素	在一个页面中只能使用一次，不适合多次复用