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

CSS基本选择器

news 2025/9/26 0:24:26

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/9/25 13:52:26

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/9/25 19:44:14

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/9/25 23:02:39

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/9/20 10:46:45

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/9/22 1:15:59

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/9/22 2:46:34

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/9/22 17:09:43

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/9/23 22:09:04