【学术投稿-第四届智能电网和绿色能源国际学术会议（ICSGGE 2025)】CSS基本选择器详解：掌握基础，轻松布局网页

可线上

官网：www.icsgge.org

时间：2025年2月28-3月2日

前言

一、基本选择器简介

1. 元素选择器（Type Selector）

基本语法

示例

注意事项

2. 类选择器（Class Selector）

基本语法

示例

注意事项

3. ID选择器（ID Selector）

基本语法

示例

注意事项：

4. 通配符选择器（Universal Selector）

基本语法

示例

注意事项

二、CSS选择器的注意事项

1. 优先级与特异性

2. 避免过度使用通配符选择器

3. 合理组合选择器

三、总结

前言

CSS选择器是Web开发中的重要组成部分，它决定了样式规则如何应用到页面中的元素。掌握常见的CSS选择器，不仅能提升开发效率，还能让代码更加简洁和高效。在这篇博客中，我们将详细解析CSS的基本选择器，包括类型选择器、类选择器、ID选择器、通配选择器等，同时给出使用时的注意事项，帮助你更好地理解和运用这些选择器。

一、基本选择器简介

CSS选择器的作用是选择页面中的元素，然后将样式应用于它们。根据选择器的不同，CSS可以精确地定位到你想要操作的元素。常见的选择器包括元素选择器、类选择器、ID选择器、通配符选择器等。

1. 元素选择器（Type Selector）

元素选择器是最基本的CSS选择器，用于选择某种类型的HTML元素并为其应用样式。你只需要写出元素的标签名称即可。

基本语法

element {
  property: value;
}

示例

p {
  color: blue;
}

这段代码将使页面中所有<p>标签的文字变为蓝色。

注意事项

选择范围广泛：会影响页面中所有的相同元素。如果只想选择某一部分，可以结合其他选择器使用。
优先级较低：在样式冲突时，元素选择器的优先级较低，可能会被类或ID选择器覆盖。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
    <style>
        h2{
            color:aquamarine;
            font-size: 30px;
        }
        p{
            color:blue;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土味官网，土的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者:网友</h3>
    <p>万水千山总是情，爱我多点行不行?</p>
    <p>我的心里给你留了块地，我的死心塌地！</p>
    <br>
    <h2>反杀土味情话</h2>
    <h3>作者:单身网友</h3>
    <p>一寸光阴一村金，劝你死了这条心.</p>
    <p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>

2. 类选择器（Class Selector）

类选择器是通过HTML元素的class属性来选中元素，它允许你选择页面中所有具有特定类的元素。类选择器以.开头。

基本语法

.class-name {
  property: value;
}

示例

.button {
  background-color: red;
  color: white;
}

这段代码会使页面中所有类名为button的元素背景变为红色，文字变为白色。

注意事项

类名复用：同一个类可以被多个元素使用，非常适合对多种元素应用相同的样式。
命名规范：为了避免命名冲突，建议采用有意义且易于辨识的类名，例如button-primary、header-title等。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配选择器</title>
    <style>
        /* 类选择器 选中类名为speak的元素 */
        .speak{
            color: red;
        }
        /* 类选择器 选中类名为answer的元素 */
        .answer{
            color: blue;
        }
        /* 类选择器 选中类名为size的元素 */
        .size{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土味官网，土的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者:网友</h3>
     <p class="speak size">你对我说:万水千山总是情，爱我多点行不行?</p>
     <p class="speak">你对我说:我的心里给你留了块地，我的死心塌地！</p>
    <br>
    <h2>反杀土味情话</h2> 
    <h3>作者:单身网友</h3>
    <p class="answer">我对你说:一寸光阴一村金，劝你死了这条心.</p>
    <p class="answer">我对你说:我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>

3. ID选择器（ID Selector）

ID选择器是通过HTML元素的id属性来选中元素，ID在页面中必须是唯一的。ID选择器以#开头，适合用于选择页面中唯一的元素。

基本语法

#id-name {
  property: value;
}

示例

#header {
  font-size: 24px;
  color: black;
}

这段代码会使页面中id="header"的元素字体大小为24px，颜色为黑色。

注意事项

ID唯一性：一个页面中只能有一个id为同名的元素。如果多个元素使用相同的ID，可能会导致样式和脚本的错误。
优先级较高：ID选择器的优先级比类选择器和元素选择器都要高，因此它会覆盖相同元素的其他样式。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器</title>
    <style>
        #earthy{
            color:aquamarine;
        }
        .size{
            font-size: 30px;
        }
        #unearthy{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土味官网，土的味道我知道</h1>
    <br>
    <h2 id="earthy" class="size">土味情话</h2>
    <h3>作者:网友</h3>
    <p>万水千山总是情，爱我多点行不行?</p>
    <p>我的心里给你留了块地，我的死心塌地！</p>
    <br>
    <h2 id="unearthy" class="size">反杀土味情话</h2>
    <h3>作者:单身网友</h3>
    <p>一寸光阴一村金，劝你死了这条心.</p>
    <p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>

4. 通配符选择器（Universal Selector）

通配符选择器（*）用于选中页面中的所有元素。它的应用范围非常广泛，但不常用于样式设计中，通常用于全局的基础样式设置。

基本语法

* {
  property: value;
}

示例

* {
  margin: 0;
  padding: 0;
}

这段代码会清除页面中所有元素的外边距和内边距，通常用于网页布局的初始化。

注意事项

慎用通配符选择器：由于它会影响页面上的所有元素，使用时要非常小心，避免造成不可预见的副作用。
性能问题：通配符选择器的性能相对较差，因为它会作用于所有元素，可能导致页面渲染变慢。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配选择器</title>
    <style>
        *{
            color: red;
            font-size: 35px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到土味官网，土的味道我知道</h1>
    <br>
    <h2>土味情话</h2>
    <h3>作者:网友</h3>
    <p>万水千山总是情，爱我多点行不行?</p>
    <p>我的心里给你留了块地，我的死心塌地！</p>
    <br>
    <h2>反杀土味情话</h2>
    <h3>作者:单身网友</h3>
    <p>一寸光阴一村金，劝你死了这条心.</p>
    <p>我心里只有一块地，我的玛莎拉蒂!</p>
</body>
</html>