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

CSS基本选择器

news 2026/4/30 18:05:09

1. 通配选择器

作用：可以选中所有的 HTML 元素。

语法：

* {
属性名: 属性值;
}

举例：

<!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;}</style></head>
<body><p>学习css最重要的是坚持</p><p>学习web后端最重要的是仔细</p><p>这样才能找到工作</p>
</body>
</html>

2. 元素选择器

作用：为页面中 某种元素 统一设置样式。

语法

标签名 {
属性名: 属性值;
}

举例：

<!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>p{color: beige;}</style></head>
<body><p>学习css最重要的是坚持</p><p>学习web后端最重要的是仔细</p><p>这样才能找到工作</p>
</body>
</html>

3. 类选择器

作用：根据元素的 class 值，来选中某些元素。

语法

.类名 {
属性名: 属性值;
}

举例：

<!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>.red {color: red;}.bulue{color: blue;}.px{font-size: 30px;}</style></head><body><p class="red">学习css最重要的是坚持</p><p class="bulue">学习web后端最重要的是仔细</p><p class="px">这样才能找到工作</p>
</body></html>

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。

2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用

英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名

要有意义，做到 “见名知意”。

3. 一个元素不能写多个 class 属性，下面是错误示例：



<h1 class = "speak" class = "big" > 你好啊 </h1>

4. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：

4. 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>#red {color: red;}#bulue{color: blue;}#px{font-size: 30px;}</style></head><body><p id="red">学习css最重要的是坚持</p><p id="bulue">学习web后端最重要的是仔细</p><p id="px">这样才能找到工作</p>
</body></html>

注意：

id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空

格、区分大小写。

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。

一个元素可以同时拥有 id 和 class 属性。

类选择器

选中所有特定类名（ class 值）的元素 —— 使用频率很高

综合

<!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>#red{color: red;}.gree{font-size: 100px;}p{background-color: azure;}</style></head><body><p id="red" class="gree blue">学习css最重要的是坚持</p><p id="bulue">学习web后端最重要的是仔细</p><p id="px">这样才能找到工作</p>
</body></html>

CSS基本选择器

1. 通配选择器作用：可以选中所有的 HTML 元素。语法： * { 属性名: 属性值; } 举例： <!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"UTF-8"><meta name"viewport" …...

编程日记 2025/2/20 15:19:06

idea-代码补全快捷键

文章目录前言idea-代码补全快捷键1. 基本补全2. 类型匹配补全3. 后缀补全4. 代码补全前言如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊，写作不易啊^ _ ^。而且听说点赞的人每天的运气都不会太差，…...

编程日记 2025/2/20 15:16:53

基于SpringBoot+vue粮油商城小程序系统

粮油商城小程序为用户提供方便快捷的在线购物体验，包括大米、面粉、食用油、调味品等各种粮油产品的选购，用户可以浏览商品详情、对比价格、下单支付等操作。同时，商城还提供优惠活动、积分兑换等福利，让用户享受到更多实惠和便利…...

编程日记 2025/2/20 15:15:47

挪车小程序挪车二维码php+uniapp

一款基于FastAdminThinkPHP开发的匿名通知车主挪车微信小程序，采用匿名通话的方式，用户只能在有效期内拨打车主电话，过期失效，从而保护车主和用户隐私。提供微信小程序端和服务端源码，支持私有化部署。更新日志 V1.0…...

编程日记 2025/2/20 15:08:34

企业内部知识库：安全协作打造企业智慧运营基石

内容概要作为企业智慧运营的核心载体，企业内部知识库通过结构化的信息聚合与动态化的知识流动，为组织提供了从数据沉淀到价值转化的系统性框架。其底层架构以权限管理为核心，依托数据加密技术构建多层级访问控制机制，确保敏感信…...

编程日记 2025/2/20 15:07:31

网络安全推荐的视频教程网络安全系列

第一章网络安全概述 1.2.1 网络安全概念P4 网络安全是指网络系统的硬件、软件及其系统中的数据受到保护，不因偶然的或恶意的原因而遭到破坏、更改、泄露，系统连续可靠正常地运行，网络服务不中断。 1.2.3 网络安全的种类P5 （1…...

编程日记 2025/2/20 15:06:27

麒麟管家全新升级，运维问题“一键修复”

麒麟管家是openKylin社区SystemManager SIG开发的一款面向社区用户，能倾听用户烦恼和诉求，也能提供便利途径、解决用户问题的系统管理类应用，可以为用户提供问题反馈、系统垃圾清理、电脑故障排查、硬件设备管理及系统小工具等一站式服务&…...

编程日记 2025/2/20 15:04:21

MVCC（多版本并发控制）机制讲解

MVCC（Multi-Version Concurrency Control，多版本并发控制）这是一个在数据库管理系统中非常重要的技术，尤其是在处理并发事务时。别担心，我会用简单易懂的方式来讲解，让你轻松掌握它的原理和作用。 1. 什么是…...

编程日记 2025/2/20 15:03:14

React 与 Vue 对比指南 - 上

React 与 Vue 对比指南 - 上本文将展示如何在 React 和 Vue 中实现常见功能，从基础渲染到高级状态管理 Hello 分别使用 react 和 vue 写一个 Hello World！ react export default () > {return <div>Hello World!</div>; }vue <…...

编程日记 2025/2/20 15:02:08

开源协议深度解析：理解MIT、GPL、Apache等常见许可证

目录前言1. MIT协议：自由而宽松的开源许可1.1 MIT协议的主要特点1.2 MIT协议的适用场景 2. GPL协议：自由软件的捍卫者2.1 GPL协议的核心理念2.2 GPL协议的适用场景 3. Apache License 2.0：开源与专利保护的平衡3.1 Apache License 2.0的主要…...

编程日记 2025/2/20 14:58:00

通用评估系统（五）- 前端部分总体说明

通用评估系统（五）- 前端部分总体说明相关链接 Gitee地址通用评估系统（一）- 介绍通用评估系统（二）- 原型设计通用评估系统（三）- 前端部分通用评估系统（四）-…...

编程日记 2025/2/20 14:56:55

STM32GPIO

目录 GPIO基本结构GPIO位结构输入部分输出部分输出模式GPIO模式浮空/上拉/下拉模拟输入开漏和推挽复用开漏/复用推挽 GPIO基本结构 GPIO是挂载在APB2总线上的外设。GPIO结构中的寄存器分为输入寄存器和输出寄存器，APB2总线通过输出寄存器向引脚发送数据&#xff0c…...

编程日记 2025/2/20 14:52:47

MyBatis拦截器终极指南：从原理到企业级实战

在本篇文章中，我们将深入了解如何编写一个 MyBatis 拦截器，并通过一个示例来展示如何在执行数据库操作（如插入或更新）时，自动填充某些字段（例如 createdBy 和 updatedBy）信息。本文将详细讲解拦…...

编程日记 2025/2/20 14:51:46

SpringBoot启动失败之application.yml缩进没写好

修改前： spring前面空格了报错输出：Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the follow…...

编程日记 2025/2/20 14:50:41

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter17-事件

十七、事件事件 JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。在传统软件工程领域，这个模型叫“观察者模式”&#xff…...

编程日记 2025/2/20 14:49:38

鸿蒙开发：V2版本装饰器之@Monitor装饰器

前言本文代码案例基于Api13。随着官方的迭代，在新的Api中，对于新的应用开发，官方已经建议直接使用V2所属的装饰器进行开发了，所以，能上手V2的尽量上手V2吧，毕竟，V2是V1的增强版本，…...

编程日记 2025/2/20 14:48:36

51单片机-外部中断

以外部中断0为例： 主程序中需要有以下代码： EA1; //打开总中断开关 EX01; //开外部中断0 IT00/1； 设置外部中断的触发方式 P3.2\P3.3为外部中断接口，通过控制P3.2口按键按下实现LED灯反转点亮 #include "reg52.h"typed…...

编程日记 2025/2/20 14:47:33

UE C++ UObject 功能的初步总结（结合官方文档）

一. Uboject的官方文档的个人理解 Objects in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community 目录在此 1.垃圾回收:上篇文章简单介绍过，UObject的创建和回收。本身是很复杂的功能，后续会接着单项深入分析。 2.引用更新 1. 反射:之前…...

编程日记 2025/2/20 14:43:25

DeepSeek和ChatGPT的全面对比

一、模型基础架构对比（2023技术版本） 维度DeepSeekChatGPT模型家族LLAMA架构改进GPT-4优化版本参数量级开放7B/35B/120B闭源175B位置编码RoPE NTK扩展ALiBiAttention机制FlashAttention-3FlashAttention-2激活函数SwiGLU ProGeGLU训练框架DeepSpeedMeg…...

编程日记 2025/2/20 14:41:21

Spring Boot Actuator 监控✨

Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具，它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator，你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。🚀 核心知识点 &#…...

编程日记 2025/2/20 14:39:17

降AI工具性价比怎么算才不踩坑？速度+承诺+技术3维度全揭秘！

降 AI 工具性价比这件事被绝大多数同学误解了——单价低 ≠ 性价比高。如果性价比是单价游戏那市场早就只剩 1-2 元/千字的工具了，但事实是 4.8 元/千字的嘎嘎降 AI、8 元/千字的比话降 AI 销量都不差。原因很简单——真正的综合性价比要看 3 个维度的乘积&#x…...

编程新知 2026/4/30 17:30:47

如何用MediaCrawler实现5大平台媒体数据自动化采集：零代码配置与智能反爬策略

如何用MediaCrawler实现5大平台媒体数据自动化采集：零代码配置与智能反爬策略【免费下载链接】MediaCrawler-new 项目地址: https://gitcode.com/GitHub_Trending/me/MediaCrawler-new 在当今数据驱动的时代，跨平台媒体内容采集已成为市场分析、…...

编程新知 2026/4/30 15:44:48

2026 年，如何构建一套具备自愈能力的 AI Agent 自动化工作流？

说实话，站在 2026 年这个节点上，如果你还在玩那种“问一句答一句”的简单 API 调用，那真的已经掉队了。现在的技术圈，大家都在聊 AI Agent（智能体）。但普通的 Agent 已经不够看了，真正的进阶玩家…...

编程新知 2026/4/30 15:42:45

Vissim仿真结果导出实战：用Excel分析行程时间与延误数据（附rsz/vlz文件处理技巧）

Vissim仿真结果导出实战：用Excel分析行程时间与延误数据（附rsz/vlz文件处理技巧） 在交通仿真领域，Vissim作为行业标杆工具，其强大的仿真能力常能生成海量数据。但许多工程师在完成仿真后，面对.rsz、.vlz等结…...

编程新知 2026/4/30 15:38:12

聚芯微冲刺港股：年营收8.5亿去年募资5亿华为OPPO小米是股东

雷递网雷建平 4月29日武汉聚芯微电子股份有限公司（简称：“聚芯微”）日前更新招股书，准备在港交所上市。2025年7月，聚芯微完成D轮融资，共募集投资总额5.1亿元。聚芯微D轮领投方为中国互联网投资基金&#x…...

编程新知 2026/4/30 15:23:16

别再拍脑袋分钱了！用Python手把手教你算Shapley Value，公平量化团队贡献

用Python实战Shapley Value：从博弈论到公平分钱的代码实现当团队完成一个重大项目后，最头疼的问题往往不是技术难点，而是如何公平分配奖金。传统按职级平分或主管拍脑袋决定的方法，难免引发"我明明贡献更多"的抱怨。这…...

编程新知 2026/4/30 15:06:04

保姆级教程：用逻辑分析仪和Python脚本调试你的UART模拟LIN从机

低成本LIN总线调试实战：用逻辑分析仪与Python构建高效测试环境当你的LIN从机设备突然开始返回乱码，或是主从机之间的通信时断时续，而手边只有一台基础款逻辑分析仪时，该如何快速定位问题？本文将带你用工程师的"瑞…...

编程新知 2026/4/30 14:46:58

如何轻松实现抖音视频批量下载：专业级免费工具终极指南

如何轻松实现抖音视频批量下载：专业级免费工具终极指南【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback supp…...

编程新知 2026/4/30 14:10:07

Tesla案引发关注：SEP专利池许可能否接受FRAND审查，连接型产业面临抉择

本案核心关注点本案真正值得关注的，不只是Tesla能不能把Avanci平台价格拉进英国法院。更重要的是，如果法院最终认为这类平台许可条款不能进入FRAND审查，那么未来SEP权利人通过专利池、平台、集体许可安排对外收费时，实施者还能不能…...

编程新知 2026/4/30 13:47:55

走向Agent-Native！360AI知识库打通业务底座，让人与AI自然协同

当行业还在讨论AI如何“答得更好”时，360亿方智能已率先让AI“做得更多”。如今，360AI知识库通过“MCPCLISkill”的三位一体架构，正逐步从“知识沉淀中枢”走向具备自主执行能力的企业级AI操作系统。通过深度融合底层连接、工程化控制与场景…...

编程新知 2026/4/30 13:45:52

1. 通配选择器

2. 元素选择器

3. 类选择器

4. ID选择器

综合

相关文章：