当前位置： 首页 > article >正文

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

article 2026/4/22 7:08:21

可线上

官网：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>

 

二、CSS选择器的注意事项

1. 优先级与特异性

选择器的优先级（即特异性）会影响样式的应用。ID选择器的优先级最高，其次是类选择器，最后是元素选择器。

  • ID选择器：#id（特异性为100）
  • 类选择器：.class（特异性为10）
  • 元素选择器：div（特异性为1）

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

虽然通配符选择器可以快速选择所有元素，但由于它会影响页面上的所有内容，可能会导致不必要的性能开销。因此应避免在生产环境中大量使用。

3. 合理组合选择器

使用组合选择器时，尽量避免过度嵌套，保持代码简洁且高效。嵌套过深的选择器可能会影响页面的性能，并导致样式难以维护。

三、总结

CSS选择器是Web开发中不可或缺的基础，掌握了选择器的使用，就能够精确地控制页面中每个元素的样式。从简单的元素选择器到复杂的组合选择器，合理运用这些选择器能让你写出更加简洁、高效的CSS代码。在实际项目中，了解选择器的优先级、特异性，以及如何避免选择器过度嵌套，能帮助避免样式冲突，提高开发效率。

希望这篇博客帮助更好地理解和使用CSS选择器，助力你成为一个更加高效的Web开发者！

相关文章：

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

可线上 官网&#xff1a;www.icsgge.org 时间&#xff1a;2025年2月28-3月2日 目录 前言 一、基本选择器简介 1. 元素选择器&#xff08;Type Selector&#xff09; 基本语法 示例 注意事项 2. 类选择器&#xff08;Class Selector&#xff09; 基本语法 示例 注意…...

编程日记 2026/4/22 7:08:21

singleTaskAndroid的Activity启动模式知识点总结

一. 前提知识 1.1. 任务栈知识 二. Activity启动模式的学习 2.1 standard 2.2 singleTop 2.3.singleTask 2.4.singleInstance 引言&#xff1a; Activity作为四大组件之一&#xff0c;也可以说Activity是其中最重要的一个组件&#xff0c;其负责调节APP的视图&#xff…...

编程日记 2026/4/21 15:44:50

Java Stream 全面解析

Java Stream 全面解析 Java 8 引入的 Stream API 提供了一种高效且声明式的方式来处理集合数据。Stream 允许你以函数式编程风格操作数据&#xff0c;支持并行处理&#xff0c;并且可以显著简化代码。下面我们将从 创建操作、中间操作 和 终端操作 三个方面进行全面深入的解析…...

编程日记 2026/4/20 1:07:26

OpenCV识别电脑摄像头中的圆形物体

思路步骤 初始化摄像头&#xff1a;使用cv2.VideoCapture打开电脑摄像头。处理每一帧图像&#xff1a;对摄像头捕获的每一帧图像进行处理&#xff0c;包括灰度化、高斯模糊、霍夫圆变换等操作。绘制圆形和圆心&#xff1a;如果检测到圆形&#xff0c;使用cv2.circle函数用黄线…...

编程日记 2026/4/22 10:43:44

如何在 Tomcat 中屏蔽错误报告

Tomcat 屏蔽错误信息 <h1>HTTP状态 400 - 错误的请求</h1><hr class"line" /><p><b>类型</b> 异常报告</p><p><b>消息</b> 在请求目标中找到无效字符。有效字符在RFC 7230和RFC 3986中定义</p>&…...

编程日记 2025/9/2 8:57:59

Vue 入门到实战 十

第10章 Vue Router​​​​​​​ 目录 10.1 什么是路由 10.2 Vue Router的安装 10.2.1 本地独立版本方法 10.2.2 CDN方法 10.2.3 NPM方法 10.2.4 命令行工具&#xff08;Vue CLI&#xff09;方法 10.3 Vue Router的基本用法 10.3.1 跳转与传参 10.3.2 配置路由 10.…...

编程日记 2026/4/11 19:23:48

jenkins-获取当前时间戳

一. 简述&#xff1a; 很多场景下&#xff0c;需要获取当前时间戳。 二. 使用方法&#xff1a; 1. 安装&#xff1a; 最简单的&#xff0c; 莫过于直接部署相关插件&#xff1a; Build Timestamp Plugin 2. 配置&#xff1a; 3. 使用&#xff1a; post {success {script…...

编程日记 2026/4/12 1:02:51

springboot mybatis-plus 集成多数据源

在 Spring Boot 项目中集成 MyBatis-Plus 并配置多数据源&#xff0c;可以按照以下步骤进行。这个示例将展示如何配置两个数据源&#xff0c;并确保每个数据源都有自己对应的 SqlSessionFactory 和事务管理器。 1. 添加依赖 首先&#xff0c;在你的 pom.xml 文件中添加必要的…...

编程日记 2026/1/10 20:45:29

SSH 登录到 Linux 服务器为什么没有要求输入密码

如果你通过 SSH 登录到 Linux 服务器时没有要求输入密码&#xff0c;通常有以下几种可能性&#xff1a; 1. 使用 SSH 密钥认证 最常见的原因是你的 SSH 登录使用了 公钥认证&#xff0c;而不是密码认证。在这种情况下&#xff0c;服务器上已经配置了你的公钥&#xff0c;并且…...

编程日记 2026/4/21 4:12:22

Kafka 中基于 Segment 和 Offset 查找消息的过程

Kafka 中基于 Segment 和 Offset 查找消息的过程 假设我们有一个 Kafka Topic&#xff0c;其 Partition 划分为多个 Segment 文件。每个 Segment 文件包含 .log、.index 和 .timeindex 文件。现在我们需要查找 Offset 为 368801 的消息。 假设条件 Partition&#xff1a;par…...

编程日记 2026/4/22 12:07:53

【Jenkins流水线搭建】

Jenkins流水线搭建 01、SpringBoot项目 - Jenkins基于Jar持续集成搭建文档基于手动方式发布项目基于dockerfile基于jenkins + dockerfile + jenkinsfile +pieline基于jenkins + jar方式的发布01、环境说明01、准备项目02、准备服务器03、安装git04、安装jdk1.805、安装maven依赖…...

编程日记 2026/4/12 4:24:25

【Java】规则引擎 Drools

https://www.bilibili.com/video/BV1nW421R7qJ 来自尚硅谷 背景 /*** 设置订单积分*/ public void setOrderPoint(Order order){if (order.getAmout() < 100){order.setScore(0);}else if(order.getAmout() > 100 && order.getAmout() < 500){order.setScore(…...

编程日记 2026/4/19 4:41:31

Transformer以及BERT阅读参考博文

Transformer以及BERT阅读参考博文 Transformer学习&#xff1a; 已有博主的讲解特别好了&#xff1a; 李沐&#xff1a;Transformer论文逐段精读【论文精读】_哔哩哔哩_bilibili知乎&#xff1a;Transformer模型详解&#xff08;图解最完整版&#xff09; - 知乎 个人杂想&…...

编程日记 2025/9/27 10:08:47

深入浅出Java反射：掌握动态编程的艺术

小程一言反射何为反射反射核心类反射的基本使用获取Class对象创建对象调用方法访问字段 示例程序应用场景优缺点分析优点缺点 注意 再深入一些反射与泛型反射与注解反射与动态代理反射与类加载器 结语 小程一言 本专栏是对Java知识点的总结。在学习Java的过程中&#xff0c;学习…...

编程日记 2026/4/21 6:25:56

python 替换字符串

在 Python 中&#xff0c;替换字符串可以通过多种方式实现&#xff0c;具体取决于您的需求和上下文。以下是几种常见的方法&#xff1a; 1. 使用 str.replace() 方法 str.replace(old, new[, count]) 是最常用的字符串替换方法。它会将字符串中的所有匹配项替换为新的字符串。…...

编程日记 2025/11/10 6:12:11

数据挖掘智能Agent

&#x1f917; CodeGenie - 智能编程助手 数据处理和分析对于数据分析工作人员来说&#xff0c;往往既复杂又令人头疼&#xff0c;需要耗费大量精力进行重复性工作。为了解决这一问题&#xff0c;我们开发了一款集成了自然语言处理和代码生成功能的智能编程助手——CodeGenie。…...

编程日记 2026/4/12 13:11:26

动手学深度学习11.7. AdaGrad算法-笔记练习（PyTorch）

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;72 优化算法【动手学深度学习v2】_哔哩哔哩_bilibili 本节教材地址&#xff1a;11.7. AdaGrad算法…...

编程日记 2026/4/7 9:33:14

【鸿蒙开发】第三十六章 状态管理 - （V2）

目录​​​​​​​ 1 V2所属装饰器 1.1 ObservedV2装饰器和Trace装饰器&#xff1a;类属性变化观测 1、概述 2、装饰器说明 3、使用限制 1.2 ComponentV2装饰器&#xff1a;自定义组件 1、概述 1.3 Local装饰器&#xff1a;组件内部状态 1、概述 2、装饰器说明 3、…...

编程日记 2026/4/16 3:32:22

基础算法# 求一个数的二进制表示当中有几个1 (C++)

文章目录 题目链接题目解读思路完整代码参考 题目链接 题目解读 给定L,R。统计[L,R]区间内的所有数在二进制下包含的“1”的个数之和。 如5的二进制为101&#xff0c;包含2个“1”。 思路 直接将该数字转为二进制表示,求其有几个1即可。 完整代码 #include<bits/stdc.…...

编程日记 2026/4/12 16:10:08

3D机器视觉的类型、应用和未来趋势

3D机器视觉的类型、应用和未来趋势 类型 3D机器视觉技术主要分为以下几类&#xff1a; 立体视觉&#xff08;Stereo Vision&#xff09; 通过两个或多个摄像头从不同角度捕捉图像&#xff0c;利用视差计算深度信息&#xff0c;生成3D模型。 结构光&#xff08;Structured Li…...

编程日记 2026/2/6 22:42:42

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题 【承接商业广告，如需商业合作请+v17740568442】 文章目录 【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题问题描述：解决方法方法一：手动中断并重启下载方法二：使用 Bash 脚本自动化下载在…...

编程日记 2026/4/12 15:20:38

什么是高亮环形光源

高亮环形光源是一种常用于机器视觉、工业检测和光学测量的照明设备。其特点是光线均匀、亮度高，并且呈环形分布，能够为被检测物体提供均匀的照明，减少阴影和反光，提高图像采集的质量。 主要特点： 环形设计：光源呈环形分布，适合安装在镜头周围，能够为物体提供均匀的照明…...

编程日记 2026/4/21 21:46:29

SpringBoot+Vue+微信小程序的高校食堂点餐系统

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 食堂点餐系统&#xff0c;作为一款融合现代信息技术的高效餐饮服务利器&#xff0c;以其…...

编程日记 2026/4/13 6:16:36

gitlab修改默认端口

问题&#xff1a;gitlab和zabbix部署在同一台服务器上导致80端口冲突 修改gitlab默认端口为8088&#xff1a; 第一步&#xff1a;修改/etc/gitlab/gitlab.rb文件 nginx[listen_port] 8088 第二步&#xff1a;修改默认的gitlab nginx的web服务80端 /var/opt/git…...

编程日记 2026/2/18 1:07:57

大预言模型|微调大预言模型初探索(LLaMA-Factory)(1)

前言 微调模型通常比从零开始训练一个模型的技术要求低。公司不需要拥有大量的深度学习专家&#xff0c;利用现有的开源工具和库&#xff08;如Hugging Face的Transformers等&#xff09;&#xff0c;中小型公司可以轻松地使用和微调大型模型&#xff0c;从而快速实现AI能力的集…...

编程日记 2026/4/16 13:27:37

IOTDB安装部署

IOTDB一般用于工业互联网&#xff0c;至于具体的介绍请自行搜索 1.环境准备 安装前需要保证设备上配有 JDK>1.8 的运行环境&#xff0c;并配置好 JAVA_HOME 环境变量。 设置最大文件打开数为 65535。 关闭防火墙 systemctl stop firewalld.service systemctl disable …...

编程日记 2026/4/13 3:56:20

【Day40 LeetCode】动态规划DP 回文子串问题

一、动态规划DP 回文子串问题 1、回文子串 647 dp数组如果采用一维的&#xff0c;很难进行推导。采用二维&#xff0c;一开始的想法是dp[i][j]表示s[i]~s[j]之间回文子串的个数&#xff0c;这样发现在推导递推公式时遇到困难&#xff0c;例如在s[i]s[j]时&#xff0c;不知道s…...

编程日记 2026/2/17 23:47:56

datasets: PyTorch version 2.5.1+cu124 available 这句话是什么意思

这句话的意思是&#xff1a; datasets&#xff1a;可能是 Python datasets 库的日志信息&#xff0c;说明它检测到了 PyTorch 的安装信息。PyTorch version 2.5.1cu124 available&#xff1a; PyTorch version 2.5.1&#xff1a;表示你的 PyTorch 版本是 2.5.1。cu124&#xf…...

编程日记 2026/2/18 20:37:22

如何通过MDM高效管理企业的Android平板？

目录 1. 批量配置设备&#xff08;Batch Device Provisioning&#xff09; 2. 应用推送与管理&#xff08;App Deployment & Management&#xff09; 3. 远程控制与故障排除&#xff08;Remote Control & Troubleshooting&#xff09; 4. 数据安全管理&#xff08;…...

编程日记 2026/4/7 10:34:49

mybatis-plus逆向code generator pgsql实践

mybatis-plus逆向code generator pgsql实践 环境准备重要工具的版本供参考pom依赖待逆向的SQL 配置文件CodeGenerator配置类配置类说明 环境准备 重要工具的版本 jdk1.8.0_131springboot 2.7.6mybatis-plus 3.5.7pgsql 14.15 供参考pom依赖 <?xml version"1.0&quo…...

编程日记 2026/4/13 2:11:47