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

CSS选择器的常见用法

news 2025/9/15 1:59:14

 

目录

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/15 0:18:50

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/9/6 15:40:21

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/9/9 14:49:12

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/8/26 13:59:58

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/8/21 20:41:27

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/9/7 8:55:13

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/9/7 15:02:04

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/9/3 20:52:43