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

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

news 2025/7/7 9:54:10

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

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

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

编程新知 2025/7/5 20:45:35

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/7 9:01:16

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/7/5 22:08:35

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/5 9:25:14

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/7/4 17:40:43

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/5 14:50:18

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/7/6 17:21:04

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/7/7 0:36:02

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/7/5 14:10:34

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2025/7/6 16:03:30