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

CSS选择器的常见用法

news 2026/2/7 23:18:11

 

目录

1、CSS编写方式

2.CSS选择器

1.标签选择器

2.类选择器

3.id选择器

4.后代选择器

3.CSS属性

CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。

 

字体、大小、间距、颜色、位置、边框、背景等等统称为样式，用来描述一个网页。

 针对一个html的元素/标签，同时可以有很多组CSS样式，一个字体是一个样式，描述一个颜色也是一个样式。

1、CSS编写方式

CSS在进行编写的时候有三种引入方式：

1.内部样式，把CSS嵌入到HTML中，通过style标签

 

2.外部样式,把CSS写成一个单独的文件，通过HTML的link标签引入

创建一个CSS文件：

 

 通过link标签引入

3.内联样式：把CSS属性写到元素的style属性内

 

（一般来说，内联样式的优先级比较高，也比较方便）

2.CSS选择器

举个例子：

div:就是一个选择器，针对选择的内容进行属性设置

{}内：就是一些具体的CSS属性，描述各种样式。

好了，我们接下来详细说明一下CSS的几种常用选择器：

1.标签选择器

使用标签名，把页面中所有同名标签的元素全选中。

此时，我们选中了所有标签为div的元素，设置样式：

<body><div>陈宇</div><div>顾魏</div><div>琑儿</div><style>div{font-size: 23px;color: red;}</style>
</body>

 效果：

但是我们发现，这种选择器是有缺点的，无法针对某一个元素进行个性化设置。因此，我们引入了其他的选择器---类选择器以及id选择器。 

2.类选择器

通过创建一个类，实现很多属性。设置元素样式时，就可以直接使用这个类，达到想要的效果。

比如，我们创建了一个类one，在里面实现了设置颜色为绿色。元素陈宇调用这个类，将字体颜色设置成了绿色。

<!-- s调用class时,去掉. --><div class="one">陈宇</div><div>顾魏</div><div>琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}div{color: red;font-size: 23px;}</style>

我们还可以创建多个类，实现不一样的样式。

<!-- s调用class时,去掉. --><div class="one">陈宇</div><div class="two">顾魏</div><div class="three">琑儿</div><style>/* CSS类使用.开头 */.one{color: green;}.two{color: red;}.three{color:yellow;}div{color: red;font-size: 23px;}

效果： 

在一个标签中，使用不同类：

 <div><span class="one">王</span><span class="two">一博</span></div>

 效果：

 

3.id选择器

id是这个元素的身份标识，我们使用id选择器可以将对应的元素设置样式

<div id="xiaozhan">肖战</div>
<style>/* id选择器使用#开头 */#xiaozhan{color: pink;}
}

效果： 

以上都为基础选择器

4.后代选择器

是多种基础选择器的综合，

 <div class="one"><h3>王一博</h3><h2>琑儿</h2></div><div class="two"><h3>肖战</h3></div><style>.one h3 {color: green;}.two h3{color:red;}</style>

 效果：

此时，先找实现的类的所有元素，再从这个类的后代（子标签/...）里查找指定的标签。

举例：

此时，我们的第一步就是找所有实现one这个类的元素，然后再从这些元素中查找标签为h3的元素，设置样式

 

3.CSS属性

常见的属性我们都可以在下面推荐的这个网站中找到：

CSS 参考手册 (w3school.com.cn) 

我们简单实现几个属性：

<div class="one">哈哈哈</div>
<div class="two">嘻嘻嘻</div>
<style>.one {/* 设置字体家族*/font-family: '宋体';/* 设置字体大小 */font-size: 28px;/* 设置字体粗细 (100-900)数字越大,字体越粗*/font-weight: 300;/* 设置文字样式 倾斜 */font-style:italic;}.two {color:red;/* 水平对齐 */text-align: center;/* 文本装饰 */text-decoration: line-through;}
</style>

 效果

  •  RGB

 光学三原色：Red Green Blue.

每个颜色，一个字节，8个比特位（0-255）

三种参数比例不同，展现的颜色也不同。

例如：（255,0,0)代表红色。

 

 除此之外，我们还可以通过十六进制来表示rgb:

一个十六进制的数字站4个比特位，一个字节就是两个十六进制的数字。所以位面可以用6个十六进制的数字来表示rgb。（每两个十六进制是一个分量）

转换成二进制就是1111 1111，0000 0000， 0000 0000，转换成十进制就是255 ，0，0.

注：如果每个分类的十六进制一样，就可以简写。比如：#AABBCC==>#ABC

  • 背景设置

1.设置背景颜色

background-color:

<div class="three">哭唧唧</div><style>.three{font-size: 50px;text-align: center;width: 400px;height: 600px;color: white;background-color:green;}</style>

效果：

 

2.设置背景图片：

background-image：

background-image: url(cy.png);

效果：

 

效果与我们想象的不同，这是由于，在默认情况下，图片是平铺的。就像我们的地砖一样。所以，为了美观，可以使用background-repeat禁止平铺。 

只需添加一行代码即可：background-repeat: no-repeat;

效果：

 

 3.设置背景大小：

background-size

如果发现图片不够背景大小，则使用background-size的cover，覆盖整个背景。

关于CSS的属性还有非常多，可以看上面给的链接，很全！！！ 

总结

CSS作为“层叠样式表”，可以通过实现多种样式，装饰一个网页，让网页变得更好看！！！

相关文章：

CSS选择器的常见用法

目录 1、CSS编写方式 2.CSS选择器 1.标签选择器 2.类选择器 3.id选择器 4.后代选择器 3.CSS属性 CSS叫做"层叠样式表",作用就是装饰网页.类似于我们平时所说的化妆。 字体、大小、间距、颜色、位置、边框、背景等等统称为样式&#xff0c;用来描述一个网页。 …...

编程日记 2023/5/14 6:28:01

Oracle EBS修改密码

FNDCPASS修改密码 用户名必须出现在FND_USER或FND_ORACLE_USERID表中。FNDCPASS实用程序和ALLRACLE功能是为应用程序用户/模式设计的。 对于FND_USER或FND_ORACLE_USERID中不存在的用户&#xff0c;可以使用alter命令更改密码。 查询用户是否存在FND_USER或FND_ORACLE_USERI…...

编程日记 2023/5/14 6:23:00

《花雕学AI》33：如何用XMind制作AI思维导图、鱼骨图和组织结构图

思维导图是一种有效的思维工具&#xff0c;它可以帮助我们整理信息&#xff0c;激发创意&#xff0c;提高效率。思维导图是一种以中心主题为核心&#xff0c;以分支结构为形式&#xff0c;以关键词和图像为内容的图形表示法。它可以让我们一目了然地看到知识的层次和逻辑&#…...

编程日记 2023/5/29 17:04:44

【rust】| 06——语言特性 | 所有权

系列文章目录 【rust】| 00——开发环境搭建 【rust】| 01——编译并运行第一个rust程序 【rust】| 02——语法基础 | 变量(不可变?)和常量 【rust】| 03——语法基础 | 数据类型 【rust】| 04——语法基础 | 函数 【rust】| 05——语法基础 | 流程控制 【rust】| 06——语言特…...

编程日记 2023/5/14 6:12:57

AUTOSAR入门

简介 AUTOSAR&#xff08;AUTomotive Open System ARchitecture&#xff09;是一种汽车软件架构标准&#xff0c;由德国大陆、博世、宝马等汽车及零部件制造商共同发起&#xff0c;拥有广泛的行业参与。其目标是为了解决汽车电子和软件系统日益复杂的问题&#xff0c;提高可重…...

编程日记 2023/5/14 6:07:55

运维高可用架构的 6 大常规方案

在介绍高可用架构的方案之前&#xff0c;先说一下什么是高可用架构&#xff0c;高可用架构应具备但不限于以下特征&#xff1a; 主从切换 很好理解&#xff0c;当其中一台机器的服务宕机后&#xff0c;对于服务调用者来说&#xff0c;能够迅速的切换到其他可用服务&#xff0c;…...

编程日记 2023/5/14 6:02:55

Java设计模式-桥接模式

简介 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构性设计模式&#xff0c;它的主要作用是将抽象部分和实现部分解耦&#xff0c;使它们可以独立变化而不会互相影响。桥接模式最早由GoF&#xff08;Gang of Four&#xff09;提出&#xff0c;在《设计模式》一书中…...

编程日记 2023/5/14 5:57:54

计及N-k安全约束的含光热电站电力系统优化调度模型【IEEE14节点、118节点】（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/14 5:52:53

欧拉函数详解

文章目录 欧拉函数定义性质计算公式求某个数欧拉函数值线性筛求区域内欧拉函数 欧拉函数 定义 在[1,n]的范围内所有与n互质的数字的个数。 我们用 φ ( n ) \varphi(n) φ(n)来表示数字n的欧拉函数的值&#xff0c;例如&#xff1a; φ ( 4 ) 2 \varphi(4)2 φ(4)2&#xf…...

编程日记 2023/5/14 5:47:52

手把手教你如何将安卓手机数据导入iPhone！【详解】

案例&#xff1a;安卓数据导入苹果手机 【大神们&#xff0c;刚换了新的苹果手机&#xff0c;原本的安卓手机数据怎么导入新手机&#xff1f;】 想要换用iPhone&#xff0c;但是又不想丢失安卓手机里的重要数据怎么办&#xff1f;如何将安卓手机数据导入iphone&#xff1f;本文…...

编程日记 2023/5/14 5:42:51

怎么轻松地搞定Win11系统备份任务？

“我是一个电脑小白&#xff0c;不是很懂电脑的一些操作。我刚买了一台新电脑&#xff0c;它装的是Win11系统&#xff0c;我害怕它出现什么问题&#xff0c;听朋友说可以通过备份的方法保护系统&#xff0c;这是真的吗&#xff1f;有谁知道该怎么进行Win11系统备份吗&#xff1…...

编程日记 2023/5/30 16:20:55

MySQL集群

目录 主从复制 主从复制流程&#xff1a; 为什么要有relay log中继日志&#xff1f; 为什么要有主从复制&#xff0c;好处&#xff1f; 实际生产环境中。如果对MySQL数据库的读写都在一台数据库服务器中操作&#xff0c;无论是再安全性、高可用性&#xff0c;还是高并发性等…...

编程日记 2023/5/14 5:32:44

关于Kerberos认证的一些攻击手法学习总结

Kerberos认证流程 前言 本文主要分享最近学习的关于域内Kerberos认证的一些攻击手法&#xff0c;以自我的理解为主&#xff0c;从原理理解切入到基本工具利用来阐述&#xff0c;个人的理解分析较为啰嗦&#xff0c;嫌太兀长的可以跳着看就好&#xff0c;还请各位谅解。如有错误…...

编程日记 2023/5/14 5:27:43

STL-deque容器

双端数组&#xff0c;可以对头端进行插入删除操作 deque 容器和 vecotr 容器有很多相似之处&#xff0c;比如&#xff1a; deque 容器也擅长在序列尾部添加或删除元素&#xff08;时间复杂度为O(1)&#xff09;&#xff0c;而不擅长在序列中间添加或删除元素。deque 容器也可…...

编程日记 2023/5/14 5:22:42

❤ go语言和java语言的优缺点

❤ go语言和java语言的优缺点对比 对比GOJAVA介绍Java是一种流行的面向对象的编程语言&#xff0c;它的语法类似于C&#xff0c;并且具有丰富的类库和工具。Java的可移植性很好&#xff0c;可以在多种平台上运行。Go是一种新兴的编程语言&#xff0c;它比Java更加简洁和易学&a…...

编程日记 2023/5/14 5:17:41

安全成就未来｜Fortinet Accelerate 2023·中国区巡展首站启幕

Fortinet Accelerate 2023中国区巡展 年度网络安全盛会 Fortinet Accelerate 2023中国区巡展&#xff0c;昨日在深圳拉开帷幕&#xff0c;开启15城巡展的“首城之站”。本年度巡展主题“安全成就未来”&#xff0c;Fortinet与中企通信、亚马逊云科技等生态合作伙伴&#xff0c…...

编程日记 2023/5/14 5:12:40

输入URL到显示界面的整个过程

以如下这个比较简单的网络拓扑模型作为例子&#xff0c;探究中间发生的整个过程&#xff1a; 1 HTTP 浏览器做的第一步工作就是要对 URL 进行解析&#xff0c;从而生成发送给 Web 服务器的请求信息。下图展示了一条长长的URL里各个元素代表什么&#xff1a; 所以整个长长的URL…...

编程日记 2023/5/14 5:07:39

BetaFlight飞控启动运行过程简介

BetaFlight飞控启动&运行过程简介 1. 源由2. 启动过程2.1 main&#xff08;主程序&#xff09;2.2 init &#xff08;初始化&#xff09;2.3 run 3. 任务调度3.1 任务定义3.2 scheduler (调度器) 4. 总结5. 参考资料6. 附录 -- 问题汇总6.1 Why desiredPeriodCycles is so …...

编程日记 2023/5/14 5:02:38

智能汽车实验二(视觉传感器标定)

实验二 视觉传感器标定&#xff08;实验报告&#xff09; 【实验目的】 1、了解开源图像处理库OpenCV的结构&#xff0c;掌握OpenCV的基本使用方法。 2、了解开源图像处理库OpenCV的基本模块功能&#xff0c;掌握常用图像处理方法。 3、掌握摄像机标定算法&#xff0c;学会使用…...

编程日记 2023/5/30 3:59:16

计算机网络：HTTP

目录 HTTP 是什么&#xff1f;HTTP 常见的状态码有哪些HTTP 常见字段有哪些参考资料 HTTP 是什么&#xff1f; HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer Protocol。 1. 「协议」 「协」字&#xff0c;代表的意思是必须有两个以上的参与者。「议」字&…...

编程日记 2023/5/14 4:52:36

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/5 4:49:43

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

在四层代理中还原真实客户端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 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2026/2/3 8:20:06

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16