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

1.2 CSS标签选择器，类选择器

news 2025/11/7 13:30:36

CSS选择器： 根据不同的需求选出不同的标签，进行美化装饰

请添加图片描述

1. 标签选择器

标签选择器(元素选择器)：用 HTML标签名作为选择器，按标签名称进行分类，为页面某一类标签指定统一的CSS样式

作用: 可以把某一类标签全部选中，进行css美化

优点：能够快速的为页面中 同类型的 统一设置CSS样式

缺点：不能差异化美化标签

语法

标签名 {属性1: 属性值1 属性2: 属性值2 属性3: 属性值3 ...
}

举个栗子

<style>
/*  给所有p标签内容设置黄颜色，给所有div标签内容设置蓝颜色  */p {color: yellow ;}div {color: blue;}</style>

类选择器class(SSS)

类选择器 ： 需要以class属性来定义它的CSS样式

口诀： 类选择器口诀： 样式点定义，结构类调用，一个或多个，开发最常用

注：

  1. 类名可以由数字，字母，下划线中划线组成
  2. 一个标签可以有多个类名，类名之间以空格隔开
  3. 以个类选择器可以选择多个标签
  4. 类名可以重复

语法

.类名 {属性1: 属性值1 
属性2: 属性值2...
}

举个栗子

<!-- 给所有class名叫rd的标签，设置其内容为红色....... -->
<style>.rd {color: red;}.yw {color: yellow;}.be {color:blue ;}.pk {color: pink;}</style></head>
<body><div class="rd">我是div标签,我的calss是红色</div>  
<div class="yw">我是div标签,我的class是黄色</div>    
<div class="be">我是div标签,我的class是蓝色</div>    
<div class="pk">我是div标签,我的class是粉色</div>
<p class="be" >我虽然是p标签,但我的class也是蓝色</p></body>

多类名选择器(SSS)

给一个标签设置多个类名，从而这些类名都能选中该标签

注：
1.也是为了简写css代码，相同属性用一个类名封装调用，修饰一群鸟，可以造出他们共有的属性，再根据不同的鸟调用不同的类选择器

语法

  1. 在标签class属性内写多个类名
  2. 多个类名中间用空格隔开
<div class="red  font20">亚瑟</div>

举个栗子


<style>.red {color: red;}.blue {color: blue;}.font_20 {font-size: 20px;}.font_40 {font-size: 40px;}</style></head><body><!-- 定义多个class类名，将red，font_40修饰第一个div内容 --><!-- 定义多个class类名，将blue，font_20修饰第二个div内容 --><div class=" red  font_40   " > 周星驰  </div><div class=" blue  font_40   " > 发哥  </div></body>

举个栗子（改前）

<!--以下代码 只使用类选择器冗余，重复属性的应封装调用，节省资源  --><style>.red {width: 100px;height: 100px;/* 背景颜色 */background-color: red;}.blue {width: 100px;height: 100px;/* 背景颜色 */background-color: blue;}</style></head><body><div class="red">红色</div><div class="blue">蓝色</div><div class="red">红色</div></body>

举个栗子（改后）

<!--以下代码 只使用类选择器冗余，重复属性的应封装调用，节省资源  -->
<style>.box {width: 100px;height: 100px;
}.red {/* 背景颜色 */background-color: red;}.blue {/* 背景颜色 */background-color: blue;}</style></head><body><div class="red"  box>红色</div><div class="blue" box>蓝色</div><div class="red" box>红色</div></body>

注意

  1. 各个类名之间用空格隔开
  2. 多类名选择器，比较节省CSS代码

相关文章：

1.2 CSS标签选择器，类选择器

CSS选择器&#xff1a; 根据不同的需求选出不同的标签&#xff0c;进行美化装饰 1. 标签选择器 标签选择器(元素选择器)&#xff1a;用 HTML标签名作为选择器&#xff0c;按标签名称进行分类&#xff0c;为页面某一类标签指定统一的CSS样式 作用: 可以把某一类标签全部选中&…...

编程日记 2023/5/27 16:20:28

【Linux】进程等待 | 详解 wait/waitpid 的 status 参数

&#x1f923; 爆笑教程 &#x1f449; 《看表情包学Linux》&#x1f448; 猛戳订阅 &#x1f525; &#x1f4ad; 写在前面&#xff1a;在上一章中我们讲解了进程创建与进程终止&#xff0c;本章我们开始讲解进程等待。进程等待这部分知识相较于前面还是较为复杂的&#xff0…...

编程日记 2023/5/27 16:20:21

OpenAI眼中的无线调优策略

问&#xff1a;无线调优策略该怎么优化无线调优是指对无线网络的各种参数进行优化&#xff0c;以提高网络性能和用户体验。以下是几个无线调优策略&#xff1a;频谱分配&#xff1a;通过优化频谱的分配&#xff0c;可以提高网络的容量和覆盖范围。在频谱分配时&#xff0c;需要…...

编程日记 2023/5/27 16:20:15

DataX入门

目录 1. DataX介绍 2. DataX支持的常用数据源类型 3. 设计理念 4. DataX框架设计 4.1. Reader 4.2. Writer 4.3. Framework 5. DataX的运行流程 6. DataX与Sqoop对比 7. 部署 8. 配置详解 9. 案例 同步MySql到HDFS 9.1. 整体结构 9.2. mySqlReader 9.2.1. …...

编程日记 2023/5/27 16:20:07

第二章SpringBoot基础学习

文章目录SpringBoot依赖管理特性依赖管理开发导入starter场景启动器SpringBoot自动配置特性自动配好Tomcat自动配好SpringMVC默认的包结构各种配置拥有默认值按需加载所有自动配置项SpringBoot注解底层注解ConfigurationImport导入组件Conditional条件装配ImportResource导入Sp…...

编程日记 2023/5/27 16:19:51

B - Build Roads (最小生成树 + 打表)

https://vjudge.net/problem/Gym-103118B/origin 在猫的国度里&#xff0c;有n个城市。猫国国王想要修n -1条路来连接所有的城市。第i市有一家ai经验价值的建筑公司。要在第i市和第j市之间修建公路&#xff0c;两个城市的建筑公司需要相互合作。但是&#xff0c;在修路的过程中…...

编程日记 2023/5/27 16:19:42

k8s管理工具

k8s管理工具 文章目录k8s管理工具Kuboard&#xff08;&#x1f495;17.3k&#xff09;KubeOperator&#xff08;&#x1f495;4.6k&#xff09;Rainbond&#xff08;&#x1f495;3.8k&#xff09;KubeSphere&#xff08;&#x1f495;12k&#xff09;Kuboard&#xff08;&…...

编程日记 2023/5/27 16:19:37

Cannot start compiler The output path is not specified for module mystatic(已解决)

1.背景&#xff1a;今天在idea上写了一些代码&#xff0c;右键run竟然跑不起来了&#xff0c;而且右下角的Event Log还报错。报错内容如下图&#xff1a;2.报错原因&#xff1a;项目代码和编译器的输出路径不在一块&#xff0c;导致idea无法找到模块的output path&#xff08;输…...

编程日记 2023/5/27 16:19:27

python入门应该怎么学习

国外Python的使用率非常高&#xff0c;但在国内Python是近几年才火起来&#xff0c;Python正处于高速上升期市场对于Python开发人才的需求量急剧增加&#xff0c;学习Python的前景比较好。 Python应用领域广泛&#xff0c;意味着选择Python的同学在学成之后可选择的就业领域有…...

编程日记 2023/5/27 16:19:16

不懂命令, 如何将代码托管到Gitee上

1.注册码云注册地址 : https://gitee.com2. 新建仓库第一步 : 创建仓库第二步 : 给仓库起名字创建好仓库后, 我们就有了一个网络上的仓库 : 3. 将网络上的仓库克隆到本地在克隆仓库之前, 我们需要先在电脑上安装以下两个工具 >>这两个软件一定要按顺序安装, 先安装第一个…...

编程日记 2023/5/27 16:19:08

Mysql常见面试题总结

1、什么是存储引擎 存储引擎指定了表的类型&#xff0c;即如何存储和索引数据&#xff0c;是否支持事务&#xff0c;同时存储引擎也决定了表在计算机中的存储方式。 2、查看数据库支持哪些存储引擎使用什么命令&#xff1f; -- 查看数据库支持的存储引擎 show engines; 或者 …...

编程日记 2023/5/27 16:19:01

python第一周作业

作业1&#xff1a;1、PPT上五个控制台界面2、要求定义两个数&#xff0c;并且交换它们的值&#xff08;请使用多种方式&#xff0c;越多越好&#xff09;作业1作业2&#xff1a;判断一个数&#xff0c;是否是2的指数2的指数0000 0010 0000 00010000 0100 0000 00110000 1000 00…...

编程日记 2023/5/27 16:18:54

FLoyd算法的入门与应用

目录 一、前言 二、FLoyd算法 1、最短路问题 2、Floyd算法 3、Floyd的特点 4、Floyd算法思想&#xff1a;动态规划 三、例题 1、蓝桥公园&#xff08;lanqiaoOJ题号1121&#xff09; 2、路径&#xff08;2021年初赛 lanqiaoOJ题号1460&#xff09; 一、前言 本文主要…...

编程日记 2023/5/27 11:47:49

303. 区域和检索 - 数组不可变

303. 区域和检索 - 数组不可变 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询: 计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&#xff1a; NumArray(int[] num…...

编程日记 2023/5/27 7:15:04

Spring Cloud融合Nacos配置加载优先级 | Spring Cloud 8

一、前言 Spring Cloud Alibaba Nacos Config 目前提供了三种配置能力从 Nacos 拉取相关的配置&#xff1a; A&#xff1a;通过内部相关规则(应用名、扩展名、profiles)自动生成相关的 Data Id 配置B&#xff1a;通过 spring.cloud.nacos.config.extension-configs的方式支持…...

编程日记 2023/5/27 11:47:39

LeetCode 236.二叉树的最近公共祖先

给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自己的祖…...

编程日记 2023/5/27 7:14:59

awk简单实例(持续更新中)

一 概述 awk命令是一种分析和处理文本文件的编程工具。它的功能非常强大&#xff0c;是Linux/Unix系统中最常用的过滤工具。 awk内建变量&#xff1a; NF 整个数据行(即$0)拥有的字段总数 NR 当前awk所处理的数据行的编号 $0 当前awk所处理的数据行 $1 数据行的第1个字段 $2 数…...

编程日记 2023/5/27 7:14:54

react动态路由组件的封装

react动态路由组件的封装 我这篇比较全面 首先下载包 npm i react-router-dom5 这里为什么要用5的版本为啥不用最新的&#xff0c;原因在于老版本跟新版本写法不一样 老版本 import { HashRouter, Route, Switch, Redirect } from react-router-dom;render() {return (<Ha…...

编程日记 2023/5/27 7:14:48

Vue项目中引入高德地图步骤详解

高德地图API官网&#xff1a;高德开放平台 | 高德地图API。 目录 一、案例效果 二、开发准备 1. 注册高德开放平台账号 2. 创建应用添加 key 值 三、项目中使用地图组件 1. npm 获取高德地图 API 2.在项目中新建 MapContainer.vue 文件&#xff0c;用作地图组件。 3.在…...

编程日记 2023/5/27 3:24:30

软件测试用例篇(2)

功能测试界面测试兼容性测试安全测试易用性测试性能测试 针对有需求的案例来设计测试用例:邮箱注册&#xff0c;部分测试用例 https://zay1xofb7z6.feishu.cn/mindnotes/bmncnKD5Ak6GSZl3PRlWDgF9z3g#mindmap 一)等价类: 场景需求:姓名长度是6-200位&#xff0c;那么如何进行设…...

编程日记 2023/5/30 4:48:50

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/10/31 8:43:16

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/11/7 10:17:31

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/11/4 8:03:35

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/11/2 22:10:34

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/11/7 0:58:25

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/9/18 9:49:21