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

CSS选择器的常见用法

news 2025/11/4 15:30:08

 

目录

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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/11/3 3:52:10

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/11/3 5:37:10

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/11/1 2:19:50

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/10/27 3:01:57

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/10/29 0:22:26

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/10/29 15:34:09

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

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

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/7/16 2:01:36