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

CSS基本选择器

news 2026/4/28 19:04:04

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. 通配选择器 作用&#xff1a;可以选中所有的 HTML 元素。 语法&#xff1a; * { 属性名: 属性值; } 举例&#xff1a; <!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. 代码补全 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React 与 Vue 对比指南 - 上

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

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

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

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

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

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

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

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

STM32GPIO

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

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

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

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

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

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

修改前&#xff1a; spring前面空格了 报错输出&#xff1a;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 的交互是通过事件实现的&#xff0c;事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器&#xff08;也叫处理程序&#xff09;订阅事件。在传统软件工程领域&#xff0c;这个模型叫“观察者模式”&#xff…...

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

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

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

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

51单片机-外部中断

以外部中断0为例&#xff1a; 主程序中需要有以下代码&#xff1a; EA1; //打开总中断开关 EX01; //开外部中断0 IT00/1&#xff1b; 设置外部中断的触发方式 P3.2\P3.3为外部中断接口&#xff0c;通过控制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.垃圾回收:上篇文章简单介绍过&#xff0c;UObject的创建和回收。本身是很复杂的功能&#xff0c;后续会接着单项深入分析。 2.引用更新 1. 反射:之前…...

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

DeepSeek和ChatGPT的全面对比

一、模型基础架构对比&#xff08;2023技术版本&#xff09; 维度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 提供的一个强大的监控和管理工具&#xff0c;它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator&#xff0c;你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。&#x1f680; 核心知识点 &#…...

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

推荐一款创新的滚动视图库：PullScrollView

推荐一款创新的滚动视图库&#xff1a;PullScrollView 【免费下载链接】PullScrollView 1.仿照新浪微博Android客户端个人中心的ScrollView&#xff0c;下拉背景伸缩回弹效果。 2.ScrollView仿IOS回弹效果。 项目地址: https://gitcode.com/gh_mirrors/pu/PullScrollView …...

编程新知 2026/4/28 18:37:22

WebGL实时折纸模拟技术：如何用GPU并行计算重塑设计工作流？

WebGL实时折纸模拟技术&#xff1a;如何用GPU并行计算重塑设计工作流&#xff1f; 【免费下载链接】OrigamiSimulator Realtime WebGL origami simulator 项目地址: https://gitcode.com/gh_mirrors/or/OrigamiSimulator 在传统3D建模软件还在依赖CPU串行计算的今天&…...

编程新知 2026/4/28 18:34:47

如何通过3步迁移完成R语言空间数据处理技术栈的终极升级

如何通过3步迁移完成R语言空间数据处理技术栈的终极升级 【免费下载链接】sf Simple Features for R 项目地址: https://gitcode.com/gh_mirrors/sf/sf 在R语言空间数据分析领域&#xff0c;从传统sp包迁移到现代sf包已成为技术演进的必然选择。sf包作为Simple Features…...

编程新知 2026/4/28 18:01:12

Win11Debloat终极指南：如何简单快速优化Windows系统性能

Win11Debloat终极指南&#xff1a;如何简单快速优化Windows系统性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and …...

编程新知 2026/4/28 16:22:57

高端口腔门诊设计：口腔门诊五感美学设计策略

在口腔门诊中&#xff0c;系统性地运用五感美学&#xff0c;能有效缓解患者焦虑&#xff0c;将冰冷的医疗空间转变为具有治愈力的舒适环境。其核心设计策略如下&#xff1a;1、视觉&#xff1a;舒缓与专业并存 采用米白、浅木等自然柔和色调&#xff0c;避免强烈视觉刺激。利用…...

编程新知 2026/4/28 15:43:29

意识盗版防御协议：软件测试从业者的专业防线与合规实践

在软件生命周期中&#xff0c;测试环节不仅是质量与安全的守门人&#xff0c;更是知识产权保护与合规性验证的关键节点。对于软件测试从业者而言&#xff0c;盗版软件的潜在威胁远超功能缺陷&#xff0c;它可能以“绿色版”、“破解补丁”或“非官方镜像”的形式&#xff0c;悄…...

编程新知 2026/4/28 15:43:28

Auto-Unlocker深度指南：解锁VMware的macOS魔法

Auto-Unlocker深度指南&#xff1a;解锁VMware的macOS魔法 【免费下载链接】auto-unlocker Unlocker for VMWare macOS 项目地址: https://gitcode.com/gh_mirrors/au/auto-unlocker 想象一下这样的场景&#xff1a;你正在Windows或Linux系统上使用VMware&#xff0c;想…...

编程新知 2026/4/28 15:19:27

11111111123

33333333311...

编程新知 2026/4/28 15:15:08

三步搞定黑苹果OpenCore EFI配置：OpCore Simplify终极指南

三步搞定黑苹果OpenCore EFI配置&#xff1a;OpCore Simplify终极指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否曾经因为复杂的OpenCore配…...

编程新知 2026/4/28 14:27:29

从BigDecimal到JSON：toString()和toPlainString()在Spring Boot接口序列化中的实战避坑

BigDecimal在Spring Boot接口中的序列化实战&#xff1a;避免科学计数法与精度丢失 金融系统中0.01元的误差可能导致数百万损失&#xff0c;而电商平台的价格展示错误会直接引发用户投诉。当你在Spring Boot接口中使用BigDecimal传输金额或高精度数值时&#xff0c;是否遇到过前…...

编程新知 2026/4/28 14:04:56