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

【前端笔记】CSS 选择器的常见用法

news 来源：原创 2025/8/18 0:25:18

1. CSS 的基本语法规范

选择器 + {1 条 / n 条声明}

选择器决定的是修改谁
声明决定的是怎么修改
声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

2. CSS 的引入方式

引入方式	描述
行内样式	在标签内使用 style 属性
内部样式	一般在 HTML 的 head 标签中定义 style 标签，在标签内部定义 css 样式
外部样式（常用）	一般在 HTML 的 head 标签中定义 link 标签，通过 href 属性引入 css 外部文件

行内样式：

内部样式：

外部样式：

css.css 文件：

3. CSS 选择器的种类

3.1 标签选择器

在 head 标签中定义 style 标签，含义为将选中的标签全部更改为自己所定义的样式；
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>/* 1. 标签选择器 *//* 将全部 div 标签改为红色，p 标签改为蓝色，h1 标签改为绿色 */div {color: red;}p {color: blue;}h1 {color: green;}</style>
</head>
<body><h1>一级标题</h1><div>我是div1</div><div>我是div2</div><p>我是p标签1</p><p>我是p标签2</p>
</body>
</html>

代码运行结果：
在这里插入图片描述

3.2 类选择器

这个类的意思和 Java 中的类概念不同，这里表示一类、分类；
在标签后加入 class 属性对标签进行分类更改样式；
类选择器前边要加点（.）；
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>/* 2. 类选择器 *//* 将 red 类改为红色，将 green 类改为绿色 */.red {color: red;}.green {color: green;}</style>
</head>
<body><h1>一级标题</h1><div class="red">我是div1</div><divc class="green">我是div2</div><p class="red">我是p标签1</p><p class="green">我是p标签2</p>
</body>
</html>

代码运行结果：按不同类进行了颜色的更改
在这里插入图片描述

3.3 id 选择器

在上述代码的基础上，如果想对p标签1再进行颜色更改，可以加如 id 属性；
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css选择器</title><style>.red {color: red;}.green {color: green;}/* 3. id选择器 *//* 将id="p1"的标签改为棕色 */#p1 {color: brown;}</style>
</head>
<body><h1>一级标题</h1><div class="red">我是div1</div><divc class="green">我是div2</div><p class="red" id="p1">我是p标签1</p><p class="green">我是p标签2</p>
</body>
</html>

代码运行结果：
在这里插入图片描述

3.4 复合选择器

复合选择器就是由多个单选择器组成；
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 4. 复合选择器 *//* 表示只更改li标签下的a标签 */li a {color: red;}/* 表示只更改id为middle标签下的li标签 */#middle li {color: red;}/* 表示只更改ul标签下li标签的a标签 */ul li a {color: green;}/* 表示只更改ol标签下li标签的a标签 */ol li a {color: pink;}/* 表示将id为a1,a2的标签一并修改 */#a1, #a2 {color: pink;}/* 等价于ul li a {} 写法*/ul>li>a {color: red;}</style>
</head>
<body><div class="font32">我是一个div, class为font32</div><div class="font32">我是一个div, class为font32</div><div><a href="#">我是一个div</a></div><ul><li>aaa</li><li>bbb</li><li><a href="#" id="a1">ccc</a></li></ul><ol id="middle"><li>1111</li><li>2222</li><li>3333</li></ol><ol><li>1111</li><li>2222</li><li><a href="#" id="a2">3333</a></li></ol><button id="submit">提交</button>
</body>
</html>

运行结果这里不做展示

3.5 通配符选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 5. 通配符选择器 *//* 将所有标签改为绿色，字体改为40像素 */* {color: green;font-size: 40px;}</style>
</head>
<body><div class="font32">我是一个div, class为font32</div><div><a href="#">我是一个div</a></div><ul><li>aaa</li><li>bbb</li><li><a href="#" id="a1">ccc</a></li></ul><ol><li>1111</li><li>2222</li></ol><button id="submit">提交</button>
</body>
</html>

运行结果：
在这里插入图片描述

4. 补充内容

当指定样式存在多处定义时，一般遵循就近原则，谁离得近就是谁的设计样式；
当一个标签中 class 和 id 同时定义了相同属性的不同参数时， id 的样式生效；
上文代码中 ul a {} ，ul 下面的标签，a 不需要紧挨着 ul，a 是 ul 的子孙即可；ul>li>a {} ul 下面的标签，li 必须要紧挨着 ul，a 必须要紧挨着 li，必须是父子关系；
颜色 color 表示有三种，英文单词、RGB、十六进制，一般使用后两种，表示的颜色范围更广；

【前端笔记】CSS 选择器的常见用法

目录 1. CSS 的基本语法规范2. CSS 的引入方式3. CSS 选择器的种类3.1 标签选择器3.2 类选择器3.3 id 选择器3.4 复合选择器3.5 通配符选择器 4. 补充内容 1. CSS 的基本语法规范选择器 {1 条 / n 条声明} 选择器决定的是修改谁声明决定的是怎么修改声明的属性是键值对&…...

编程日记 2025/8/18 0:25:18

电脑桌面悬浮窗便签，好用的电脑桌面便签工具

不知道大家有没有发现，我们每天要处理的事情越来越多：工作会议、项目截止日期、临时灵感、购物清单...光靠大脑记忆显然不够靠谱。你可能试过用手机备忘录，但工作时频繁切换设备又很影响效率。这时候，一款好用的电脑桌面便签工具…...

编程日记 2025/8/17 8:29:50

Windows环境下maven的安装与配置

1.检查JAVA_HOME环境变量 Maven是使用java开发的，所以必须知道当前系统环境中的JDK的安装目录。搜索栏直接输入“cmd” 或者 WinR 输入cmd 在打开的终端窗口输入“echo %JAVA_HOME”，就可以看到jdk的位置了。如果没有的话，请参考我的文章&a…...

编程日记 2025/8/17 8:52:47

PyTorch 中如何针对 GPU 和 TPU 使用不同的处理方式

一个简单的矩阵乘法例子来演示在 PyTorch 中如何针对 GPU 和 TPU 使用不同的处理方式。这个例子会展示核心的区别在于如何获取和指定计算设备，以及（对于 TPU）可能需要额外的库和同步操作。示例代码： import torch import tim…...

编程日记 2025/8/18 0:25:17

数据库同步方案：构建企业数据流通的高速通道

在数字经济时代，数据已成为企业核心资产。根据Gartner统计，超过70%的企业因数据孤岛问题导致决策延迟，而高效可靠的数据库同步方案正是破解这一困局的关键技术。本文将深度解析数据库同步的核心逻辑、主流方案及实践策略，助企业构…...

编程日记 2025/8/18 0:22:07

文章目录 1. 官方文档教程2. 注册实现3. 登录实现4. 关于作者其它项目视频教程介绍 1. 官方文档教程 https://developers.weixin.qq.com/miniprogram/dev/framework/路由跳转的几种方式： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab…...

编程日记 2025/8/18 0:21:19

VSCode怎么同时打开多个页面

VSCode中打开一个文件会把另一个文件覆盖，始终保持打开一个文件的状态，相对于其他IDE是不太习惯的，如果同时打开两个文件页面怎么去设置呢 1、禁用预览模式 2、快速分屏快捷键： Ctrl\ (Windows/Linux) 或 Cmd\ (macOS)...

编程日记 2025/8/16 12:31:14

【多种不同提交方式】通过springboot实现与前端网页数据交互(非常简洁快速)

【多种不同提交方式】通过springboot实现与前端网页数据交互提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是springboot的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】&am…...

编程日记 2025/8/17 8:26:20

Web 架构之负载均衡全解析

文章目录一、引言二、思维导图三、负载均衡的定义与作用定义作用1. 提高可用性2. 增强性能3. 实现扩展性四、负载均衡类型硬件负载均衡代表设备优缺点软件负载均衡应用层负载均衡代表软件优缺点网络层负载均衡代表软件优缺点五、负载均衡算法轮询算法（Round Ro…...

编程日记 2025/8/18 0:21:18

猫咪如厕检测与分类识别系统系列～进阶【一】视频流推流及网页实时展示

前情提要家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如…...

编程日记 2025/8/18 0:24:28

DeepSeek全域智能革命：从量子纠缠到星际文明的认知跃迁引言：认知边界的坍缩与重构

一、认知架构的技术基石 1.1 混合专家系统的流形蒸馏 DeepSeek-R2的MoE架构采用微分流形蒸馏技术，将6710亿参数的教师模型（如DeepSeek-Prover-V2）的知识嵌入到动态路由网络中。通过辛几何约束下的参数投影，模型在保留数学证明能…...

编程日记 2025/8/18 0:18:19

Mkdocs页面如何嵌入PDF

嵌入PDF 嵌入PDF代码 ，注意PDF的相对地址 <iframe src"../个人简历.pdf (相对地址)" width"100%" height"800px" style"border: 1px solid #ccc; overflow: auto;"></iframe>我的完整代码： <d…...

编程日记 2025/8/18 0:24:28

JS进阶DAY2 构造函数数据常用函数

深入对象 1.创建对象的三种方式 1.利用对象字面量创建对象 const o{ name:佩奇 } 2.利用 new Object 创建对象 const onew Object({ name:佩奇}) console.log(o) //{name:佩奇} 3.利用构造函数创建对象 2.构造函数构造函数:是一种特殊的函数，主要用来初始…...

编程日记 2025/8/18 0:21:18

【ARM AMBA AHB 入门 3 -- AHB 总线介绍】

请阅读【ARM AMBA 总线文章专栏导读】文章目录 AHB Bus 简介AHB Bus 构成AHB BUS 工作机制AHB 传输阶段 AHB InterfacesAHB仲裁信号 AHB 数据访问零等待传输(no waitstatetransfer)等待传输(transfers with wait states)多重传送(multipletransfer)--Pipeline AHB 控制信号 A…...

编程日记 2025/8/16 13:42:19

计划评审技术PERT

计划评审技术（Program Evaluation and Review Technique，PERT）是一种用于项目管理和分析的工具，主要用于估算项目完成时间、识别关键路径以及评估项目进度风险。它最初是在20世纪50年代由美国海军开发的，用于管理复杂的…...

编程日记 2025/8/16 13:42:17

【Leetcode 每日一题 - 扩展】3342. 到达最后一个房间的最少时间 II

问题背景有一个地窖，地窖中有 n m n \times m nm 个房间，它们呈网格状排布。给你一个大小为 n m n \times m nm 的二维数组 m o v e T i m e moveTime moveTime，其中 m o v e T i m e [ i ] [ j ] moveTime[i][j] moveTime[i][j] 表…...

编程日记 2025/8/17 21:46:09

Linux57配置MYSQL YUM源

错了，弄错了下载地址显示没MYSQL 刚才YUM包弄错了下的是rpm文件应该安装通过yum install安装 .repo中的enabled需要修改哪些能修改哪些不改配置特定软件的YUM仓库 nginx看教程有官方文档将官方文档中YUM配置写入.repo文件然后yum clean all yum ma…...

编程日记 2025/8/17 10:43:05

Kafka是什么？典型应用场景有哪些？（消息队列、流处理平台；日志收集、实时分析、事件驱动架构等）

Kafka 核心解析与场景代码示例一、Kafka核心概念 Apache Kafka 是分布式流处理平台，具备以下核心能力： 发布-订阅模型：支持多生产者/消费者并行处理持久化存储：消息默认保留7天（可配置）分区机制&#x…...

编程日记 2025/8/17 21:16:14

数据实验分析

数据分析数据分类与绘图数据分类方法：通过指定列名和函数（如SUM）来分类数据，确保数据集中包含所需列，否则会报错。嵌套柱形图应用：嵌套柱形图用于展示多层次分类的数据，如按店名和化妆品类别分类…...

编程日记 2025/8/17 23:21:02

PostgreSQL中“参数默认值实现伪重载“详解

什么是伪重载？ "伪重载"指的是通过单一函数定义配合参数默认值和条件逻辑来模拟传统编程语言中方法重载的效果。与真正的函数重载（PostgreSQL支持的多同名函数不同参数实现）不同，伪重载是在一个函数内部处理不同参数组…...

编程日记 2025/8/18 0:23:39

在IDEA中编写Spark程序并运行

Spark是基于scala的，当然它也可以支持java和scala还有python语言，我们这里会使用scala。 1.在Idea中安装插件，使得Idea中可以编写scala代码。 2.使用Maven创建项目，并在pom.xml文件中配置相关的依赖。 3.设置maven依赖项。修改po…...

编程日记 2025/8/18 0:22:08

知识图谱：AI大脑中的“超级地图”如何炼成？

人类看到“苹果”一词，会瞬间联想到“iPhone”“乔布斯”“牛顿”，甚至“维生素C”——这种思维跳跃的背后，是大脑将概念连结成网的能力。而AI要模仿这种能力，需要一张动态的“数字地图”来存储和链接知识，这就是知识…...

编程日记 2025/8/17 10:28:51

Facebook隐私设置详解：如何保护你的个人信息

在这个数字化时代，个人信息安全变得尤为重要。Facebook 作为全球最大的社交网络平台之一，拥有数十亿用户。然而，随着用户数量的增加，隐私问题也日益凸显。本文将详细介绍 Facebook 的隐私设置，帮助你更好地保护个人信息…...

编程日记 2025/8/18 0:24:26

【Hive入门】Hive数据导入与导出：批量操作与HDFS数据迁移完全指南

目录引言 1 Hive数据导入概述 1.1 Hive数据导入方式分类 1.2 Hive数据模型与存储结构 2 LOAD DATA命令详解 2.1 基本语法与参数 2.2 LOAD DATA执行流程 2.3 案例分析 3 HDFS数据迁移技术 3.1 HDFS文件操作与Hive集成 3.2 外部表技术应用 3.3 分区表动态加载 4 性…...

编程日记 2025/8/17 9:03:34

深入浅出JSON：现代数据交换的基石

JSON（JavaScript Object Notation）已经成为当今互联网上最流行的数据交换格式之一。无论是Web API、配置文件还是NoSQL数据库，JSON都扮演着至关重要的角色。本文将带你全面了解JSON，从基础概念到高级应用。什么是JSON&#xff1…...

编程日记 2025/8/16 13:41:58

C++ 日志系统实战第四步：设计与代码实现详解

全是通俗易懂的讲解，如果你本节之前的知识都掌握清楚，那就速速来看我的项目笔记吧~ 本文将加入项目代码编写！ 目录日志系统框架设计模块划分模块关系图代码设计实用类设计日志等级设计日志消息类日志输出格式日志落地(L…...

编程日记 2025/8/17 8:26:17

DeepSeek API接口调用示例（开发语言C#，替换其中key值为自己的key值即可）

示例： DeepSeek官方接口说明文档：对话补全 | DeepSeek API Docs 官网暂未提供C#代码实现：（以下为根据CURL接口C#代码调用） using System; using System.Collections.Generic; using System.Linq; using System.Text; …...

编程日记 2025/8/18 0:23:40

PyTorch常用命令（可快速上手PyTorch的核心功能，涵盖从数据预处理到模型训练的全流程）

以下是PyTorch常用命令的分类整理，涵盖张量操作、模型构建、数据加载、训练流程等核心内容： 1. 张量操作创建张量 x torch.tensor([1, 2, 3]) # 从数据创建 x torch.zeros(3, 3) # 全零张量 x torch.ones(3, 3) …...

编程日记 2025/8/17 14:27:49

软开错题（二）

SNMP的传输层协议是UDP Linux操作系统中通常使用apache作为web服务器，其默认的web站点的目录是 /var/www/html 归并排序不是原地排序邻接表：包含n个头节点和e个表节点，其广度和深度遍历的时间复杂度都是O(ne) grant使用方式 grant 权限 …...

编程日记 2025/8/17 8:26:28

拉削丝锥，螺纹类加工的选择之一

在我们的日常生活中，螺纹连接无处不在，从简单的螺丝钉到复杂的机械设备，都离不开螺纹的精密加工。今天，给大家介绍一种的螺纹刀具——拉削丝锥： 一、拉削丝锥的工作原理拉削丝锥，听起来有点陌生吧&#…...

编程日记 2025/8/18 0:22:08

【Python Number(数字)】

Python 中的数字类型是编程的基础元素，用于表示数值数据并进行数学运算。以下是 Python 数字类型的核心知识点： 一、基础数字类型整数（int） 表示整数值，例如 42, -7, 0支持任意精度（无大小限制&#xff09…...

编程日记 2025/8/17 15:55:12

大疆无人机SDR 链路

在大疆无人机或通信技术领域，SDR 是 Software-Defined Radio（软件定义无线电） 的缩写，而 SDR 链路指的是一种通过软件编程实现无线通信功能的技术链路。其核心是通过软件动态调整通信参数&#…...

编程日记 2025/8/18 0:21:21

linux基础学习--linux磁盘与文件管理系统

linux磁盘与文件管理系统 1.认识linux系统 1.1 磁盘组成与分区的复习首先了解磁盘的物理组成，主要有：圆形的碟片（主要记录数据的部分）。机械手臂，与在机械手臂上的磁头（可擦写碟片上的内容）。主轴马达，可以转动碟片，让机械手臂的磁头在碟片上读写数据。数据存储…...

编程日记 2025/8/18 0:23:39

【Qt】Qt 构建系统详解：qmake 入门到项目实战

Qt 构建系统详解：qmake 入门到项目实战本文将系统介绍 Qt 构建工具 qmake 的用法，并通过一个完整的项目结构示例，帮助你掌握 .pro 文件编写、子项目管理、模块依赖等核心技能。 🧭 一、什么是 qmake？ qmake 是 Qt 提…...

编程日记 2025/8/17 10:44:15

Laravel 12 实现验证码功能

Laravel 12 实现验证码功能在 Laravel 12 中实现验证码功能可以通过多种方式，以下是几种常见的方法： 方法一：使用 Captcha 包（推荐） 首先安装 mews/captcha 包： composer require mews/captcha发布配置…...

编程日记 2025/8/18 0:22:07

深入解析Http11AprProtocol：Tomcat高性能通信的底层原理

HTTP/1.1 协议作为 Web 通信的基础标准，其实现效率直接影响服务器性能。Apache Tomcat 作为 Java 生态中最流行的 Servlet 容器，提供了多种 HTTP 协议实现方案，其中基于 Apache Portable Runtime（APR）的 Http11AprProt…...

编程日记 2025/8/18 0:18:20

HTTP请求与缓存、页面渲染全流程

文章目录前言**1. HTTP请求与缓存处理****缓存机制**• 强缓存（Cache-Control / Expires）• 协商缓存（Last-Modified / ETag） **2. 服务器响应与数据解析****3. HTML DOM 构建****4. CSSOM 构建****5. 渲染树（Render …...

编程日记 2025/8/18 0:14:11

HTB - Eureka记录

HTB - Eurekahttps://mp.weixin.qq.com/s/r1WmZXNR6YkvnwP40liciA...

编程日记 2025/8/16 17:16:32

CentOS 7 基础环境安装脚本

🌟 CentOS 7 基础环境安装脚本使用文档 🧰 一键部署！助你在 CentOS 7 系统上快速构建高效开发环境。开源地址：https://github.com/hahaha-zsq/Shortcut-Script CentOS 7 基础环境安装脚本使用 📦 项目结构一览 ./ ├…...

编程日记 2025/8/18 0:21:21

【Python 模块】

Python 中的模块（Module）是组织代码的核心方式，通过将相关函数、类和变量封装到独立文件中，实现代码复用和结构化管理。以下是模块的核心知识点： 一、基础概念 1. 模块定义任何 .py 文件都是一个模块模块名即文件名…...

编程日记 2025/8/17 8:37:08

极狐Gitlab 如何创建并使用子群组？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网子群组 (BASIC ALL) 您可以将极狐GitLab 群组组织成子群组。您可以使用子群组： 内部和外部组织分开。因为每个子…...

编程日记 2025/8/17 9:27:59

【MCP】服务端搭建（python和uv环境搭建、nodejs安装、pycharma安装）

【MCP】服务端搭建（python和uv环境搭建、nodejs安装、pycharma安装） 服务端搭建（1）python和uv环境搭建（2）nodejs安装（3）pycharm安装服务端搭建 （1）python和…...

编程日记 2025/8/18 0:22:06

【疑难杂症2025-003】Java-mvn项目在gitlab-ci构建镜像时遇到的问题和解决方案

本文由Markdown语法编辑器编辑完成． 1.背景: 之前从同事手里接手了一个java的项目，是用maven构建项目的．由于我们的服务都是基于docker来部署的，因此这个java项目也是要编译成docker image然后发布．但是之前一直都是…...

编程日记 2025/8/17 18:26:49

AI与Web3.0：去中心化智能合约的未来

AI与Web3.0：去中心化智能合约的未来系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录 AI与Web3.0：去中心化智能合约的未来摘要引言1.1 技术演进背景1.2 行业格局分化技术架构对比2.1 智能合约…...

编程日记 2025/8/17 10:32:35

记录学习的第三十五天

今天主攻单源最短路Dijkstra算法。不过，还是没有完全掌握。首先是书本的例题我理解了一遍。然后其实在力扣上做了三道题的，但是我看题解的情况就不太会。然后试着用上面的方法敲了一下↓的题，但是不对啊，我也不知道为什么呀。...

编程日记 2025/8/17 8:29:09

虚拟现实（VR）与增强现实（AR）在教育领域的应用：开启沉浸式学习新时代

前言随着科技的飞速发展，虚拟现实（VR）和增强现实（AR）技术逐渐从游戏和娱乐领域走向教育领域。传统的教育模式主要依赖于书本、黑板和课堂讲解，这种模式虽然有效，但往往难以激发学生的学习兴趣和…...

编程日记 2025/8/17 8:45:21

线性代数之矩阵运算：驱动深度学习模型进化的数学引擎

目录一、矩阵运算的基本概念与类型二、矩阵运算在深度学习中的核心作用三、典型深度学习模型中的矩阵运算实现四、矩阵运算的优化与加速五、未来发展趋势与挑战矩阵运算是线性代数的核心组成部分，也是深度学习模型构建和优化的数学基础。从基本的前向传播到复杂的注…...

编程日记 2025/8/16 12:31:07

Spring AI（1）—— 基本使用

Spring AI 是一个用于 AI 工程的应用程序框架。其目标是将 Spring 生态系统设计原则应用于 AI 领域。 Spring AI 提供以下功能： 支持所有主要的 AI 模型提供商，例如 Anthropic、OpenAI、Microsoft、Amazon、Google 和 Ollama等。支持跨 AI 提供商对同…...

编程日记 2025/8/17 10:48:25