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

CSS常用选择器

news 2026/2/8 21:41:46

1.CSS是什么

2.CSS的三种写法

2.1内部样式

2.2内联样式

2.3外部样式

3.CSS选择器

3.1标签选择器

3.2类选择器(更好的选择)

3.3ID选择器

3.4后代选择器

3.5子选择器

3.6并集选择器

3.7伪类选择器(复合选择器的特殊用法)

1.CSS是什么

CSS全称Cascding Style Sheets,能够对网页中元素的位置排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离

基本语法规范:

选择器+{一条/N条声明}

选择器决定针对谁修改

声明决定做什么修改

声明的属性是键值对,使用;区分键值对,:来区分键和值

我们来看一个例子

        <p>这是一个段落</p>

当我们用CSS来设置后

<body><p>这是一个段落</p><!-- style标签可以放到代码的任意位置中 --><style>p{color:green;}</style>
</body>

再次刷新后,文本的颜色改变了

这里的p就是一个选择器,{}里面的CSS属性是可以写一个或者多个的,每个属性都是一个键值对 [color:green;]用:来区分键和值,;来区分键值对

每个键值对可以独占一行,也可以不独占,我们还可以加上其他属性设置,比如将字体放大:

            p{color:green;font-size: 30px;}

这只是一种写法

实际上CSS有三种写法.

2.CSS的三种写法

2.1内部样式

使用style标签,直接把CSS写到html文件中.此时style标签可以放到代码的任何位置,建议是放在head标签里..我们上述举例的写法就是内部样式

2.2内联样式

使用style属性,针对指定的元素设置样式(不需要写选择器,直接写属性键值对),这个时候样式只针对当前元素生效

我们看一个例子

        <p style="color:green;font-size: 30px;">这是一个段落(内联样式)</p><p>这是另外一个段落</p>

我们可以看到,内联样式所使用的属性只针对当前标签有效,对别的标签是无效的

内联样式的优先级是比内部样式的优先级高的,我们在内联样式的基础上设置一个内部样式

        <p style="color:green;font-size: 30px;">这是一个段落(内联样式)</p><style>p{color:red;font-size: 30px;}</style>

可以看到,显示的是内联样式修改的结果,因此内联样式的优先级是高于内部样式的

2.3外部样式

把CSS代码单独作为一个.scc文件,再通过link属性,让html引入该css文件.

        <P>这是一个段落(外部样式)</P>

css文件:

这是未引入css文件的结果:

引入css文件,不引入是不会生效的

结果显示

这就是外部样式的写法,实际开发中也是用的最多的,让html和css分离开,相互不影响

当前学习阶段简单为主,以内部样式为主

下面我们学习CSS的选择器和常用属性值

3.CSS选择器

3.1标签选择器

刚才我们写的css文件里这样的代码,p是一个标签的名字,直接在{}前写标签名字

此时意味着会选中当前页面所有指定标签!!看一个例子

        <P>这是一个段落</P><P>这是一个段落</P><P>这是一个段落</P>

这是三个段落,标签名相同,此时我们使用标签选择器来设置,那么这三个都会受影响,别的标签名不会受影响!

      <style>p{color: blueviolet;font-size: 50px;}</style>

3.2类选择器(更好的选择)

标签选择器的优点就是能快速的选择出同一类型的标签,但是缺点也很明显,不能差异化选择,如果我们希望同一类型标签的样式有所不同,类选择器是更好的选择

类选择器可以创建CSS类,手动指定哪些元素使用这个类(这个类与面向对象中的类是无关的,就是把一组CSS属性的集合起了个名字,方便引用)

我们看示例

        <div>这是第一个div</div><div>这是第二个div</div><div>这是第三个div</div><style>/* 此处定义了一个CSS类,名字叫做one,CSS类定义的时候需要用.开头 */.one{color: red;}.two{color: blue;}.three{color: blueviolet;}</style>

此时定义好了CSS类,我们使用不同的颜色来区分不同类,然后给三个标签引入

定义类的时候,需要用到.来开头,使用类的时候,通过class属性="类名"即可,不用带.

一个类可以被一个元素引用,也被多个元素引用.

一个元素可以引用一个类,也可以引用多个类,灵活的引用就让元素的样式丰富多彩了

CSS叫做层叠样式表,层叠可以理解为一个元素可以应用多组样式,这些样式就像被一层一叠加上去的

<style>/* 此处定义了一个CSS类,名字叫做one,CSS类定义的时候需要用.开头 */.one{color: red;}/* /* .two{color: blue;} */.three{font-size: 20px;} </style><div class="one three" >这是一个段落</div><div class="one three" >这是二个段落</div>

打开控制台选择第一个标签:

这个样式就是由one和three两个类叠加起来的效果

3.3ID选择器

html页面中每个元素都可以设置一个唯一的ID.作为身份的标识,这个值在页面里必须是唯一的

设置ID后,就可以通过ID来选中对应的元素了

看个例子

        <div id="oneDiv">这是一个div</div><div id="twoDiv">这是另一个div</div><style>#oneDiv{color: red;}#twoDiv{font-size: 30px;}</style>

类选择器可以让多个元素使用,ID选择器更有针对性,因为ID是唯一的,他也只能针对这个唯一的元素生效

上述是简单的基础选择器,CSS还支持复杂的复合选择器

3.4后代选择器

把多个简单的基础选择器任意组合一下

        <ol><li>111</li><li>222</li><li>333</li><li>444</li></ol><ul><li>555</li><li>666</li><li>777</li><li>888</li></ul><style>ul li{color: green;}</style>

这是典型的后代选择器,只选中了ul中的list做出改变,没有选择ol中的list

后代选择器的寻找流程就是先寻找页面所有的ul,再在ul中寻找所有的li

li只要是ul的后代即可,不一定是"子元素"

三个基础选择器是也可以组合的:比如除了上述标签选择器组合,还可与类选择器组合

        <ol class="one"><li>111</li><li>222</li><li>333</li><li>444</li></ol><style>.one li{color: red;}</style>

3.5子选择器

也是把多个简单的基础选择器组合,不同的是,只匹配子元素,不匹配孙子元素...

元素1>元素2{ 样式声明 }

使用大于号分割

只能选儿子,不选孙子元素

例如:

        <style>.one a{color: red;}</style><div class="one"><a href="#">链接一</a><p><a href="#">链接二</a></p></div>

这是后代选择器,儿子元素和孙子元素都会选中,效果

我们使用子选择器写法

只会选中one的子元素,不会选中孙子元素

3.6并集选择器

用于选择多组标签

元素1,元素2{ 样式声明 }

通过逗号来分割多个元素

表示同时选中元素1 2,多组选择器应用了相同的样式

任何基础选择器都可以使用并集选择器

并集选择器建议竖着写,每个选择器占一行,最后一个选择器不能加逗号

来看代码

        <style>.two,.three{color: blueviolet;font-size: 20px;}</style><div class="one"><a href="#" class="two">链接一</a><p><a href="#" class="three">链接二</a></p></div>

3.7伪类选择器(复合选择器的特殊用法)

前面的选择器是选中某个元素,这个选择器是选中某个元素的某个特定状态

:hover 鼠标悬停时的状态

:active 鼠标按下时的状态

我们看一个例子

        <div class="one">这是一个div</div><style>.one:hover{color: red;font-size: 40px;}</style>

还有个鼠标按下的伪类选择器

鼠标先悬停,然后按下

css的选择器就介绍到这里了

CSS常用选择器

目录 1.CSS是什么 2.CSS的三种写法 2.1内部样式 2.2内联样式 2.3外部样式 3.CSS选择器 3.1标签选择器 3.2类选择器(更好的选择) 3.3ID选择器 3.4后代选择器 3.5子选择器 3.6并集选择器 3.7伪类选择器(复合选择器的特殊用法) 1.CSS是什么 CSS全称Cascding Style Sh…...

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

Registry与DGC的攻击利用

0x01 2022-02-03写的一篇文章。 0x02 Registry Registry指的是RMI的注册表，攻击的目标是注册表所在的机器，一般注册表和RMI Server在同一个机器上，特殊情况下也会在不同机器上。在我们通过LocateRegistry#getRegistry获取到目标开启的注…...

编程日记 2023/5/12 16:51:18

赛道持续降温！又一家自动驾驶公司裁员，市值曾超50亿美元

从去年下半年开始，自动驾驶赛道的裁员、倒闭风潮盛行。本周，美股卡车自动驾驶上市公司Embark Trucks（EMBK）宣布将裁员70%，同时大幅缩减业务。“痛苦可能还没有结束，”公司首席执行官Alex Rodrigues在给员…...

编程日记 2023/5/12 16:51:06

路径规划 | 图解动态A(D)算法(附ROS C++/Python/Matlab仿真)

目录0 专栏介绍1 什么是D*算法？2 D*算法核心概念一览3 D*算法流程图4 步步图解：算法实例5 算法仿真与实现5.1 ROS C实现5.2 Python实现0 专栏介绍 🔥附C/Python/Matlab全套代码🔥课程设计、毕业设计、创新竞赛必备！详…...

编程日记 2023/5/12 16:50:58

GraphCut、最大流最小割定理

G（V，E）；V为点集，E为边集； 节点集V中的节点分为： （1）终端节点。不包含图像像素，用S和T表示。S为源点，T为汇点。图像分割中通常用S表示前景目标&a…...

编程日记 2023/5/12 16:50:50

Word文档的密码忘记了怎么办？

Word文档可以设置两种密码，文件的“限制密码”和“打开密码”，今天来分享一下忘记这两种密码可以如何处理。如果忘记的是Word文档的“限制密码”，文档就无法编辑及更改了，菜单目录中的相关选项也都是灰色状态，无法点…...

编程日记 2023/5/12 16:50:40

Java分布式事务(二)

文章目录🔥分布式事务处理_认识本地事务🔥关系型数据库事务基础_并发事务带来的问题🔥关系型数据库事务基础_MySQL事务隔离级别🔥MySQL事务隔离级别_模拟异常发生之脏读🔥MySQL事务隔离级别_模拟异常发生之不可重复读&…...

编程日记 2023/5/12 16:50:28

游戏项目中的程序化生成(PCG)：算法之外的问题与问题

本篇讨论的是什么从概念上讲，PCG（程序化生成）的含义很广：任何通过规则计算得到的内容，都可算作是PCG。但在很多游戏项目的资料，包括本篇，讨论PCG时特指是：用一些算法/工具(特别是H…...

编程日记 2023/5/12 16:50:20

【C++】位图+哈希切割+布隆过滤器

文章目录一、位图1.1 位图概念1.2 位图实现1.2.1 把x对应比特位0置11.2.2 把x对应比特位1置01.2.1 查看x对应比特位1.3 位图源码1.4 位图的应用二、哈希切割（处理海量数据）三、布隆过滤器3.1 布隆过滤器的概念3.2 布隆过滤器的应用场景3.3 布隆过滤器的实…...

编程日记 2023/5/12 16:50:08

python实现网络游戏NPC任务脚本引擎(带限时任务功能)

python实现NPC任务脚本引擎一、简介二、简单示例三、实现任务限时的功能四、结合twisted示例一、简介要实现面向对象的网络游戏NPC任务脚本引擎，可以采用以下步骤： 1.定义NPC类：该类应该包括NPC的基本属性和行为，如名字、位置、血量、攻击力等等。NPC还应该有任务的列表…...

编程日记 2023/5/12 16:49:57

C语言的原子操作（待完善）

文章目录一、什么是原子操作二、为什么需要原子操作三、API一、什么是原子操作原子操作是不可分割的，在执行完毕之前不会被任何其它任务或事件中断，可以视为最小的操作单元，是在执行的过程中、不会导致对数据的并发访问的、最小操作&#x…...

编程日记 2023/5/12 16:49:46

JavaScript Boolean 布尔对象

文章目录JavaScript Boolean 布尔对象Boolean 对象Boolean 对象属性Boolean 对象方法检查布尔对象是 true 还是 false创建 Boolean 对象JavaScript Boolean 布尔对象 Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false&#xff0…...

编程日记 2023/5/12 16:49:33

删除链表元素相关的练习

目录一、移除链表元素二、删除排序链表中的重复元素三、删除排序链表中的重复元素 || 四、删除链表的倒数第 N 个结点一、移除链表元素给你一个链表的头节点 head 和一个整数 val ，请你删除链表中所有满足 Node.val val 的节点，并返回新的头…...

编程日记 2023/5/12 16:49:21

3DEXPERIENCE Works 成为了中科赛凌实现科技克隆环境的催化剂

您的企业是否想过实现设计数据的统筹管理，在设计上实现标准化，并把每位设计工程师串联起来协同办公?中科赛凌通过使用3DEXPERIENCE Works 实现了上述内容，一起来看本期案例分享吧!中科赛凌通过其自主研发的单压缩机制冷技术实现零下190℃制…...

编程日记 2023/5/12 16:49:10

少儿编程电子学会图形化编程等级考试Scratch一级真题解析（选择题）2022年12月

少儿编程电子学会图形化编程等级考试Scratch一级真题解析2022年12月选择题（共25题，每题2分，共50分） 1、小明想在开始表演之前向大家问好并做自我介绍，应运行下列哪个程序 A、 B、 C、 D、答案：D...

编程日记 2023/5/12 16:48:59

【完整版】国内网络编译，Ambari 2.7.6 全部模块源码编译笔记

本次编译 ambari 2.7.6 没有使用科学上网的工具，使用的普通网络，可以编译成功，过程比 ambari 2.7.5 编译时要顺畅。以下是笔记完整版。如果想单独查看本篇编译笔记，可参考：《Ambari 2.7.6 全部模块源码编译笔记》该版本相对 2.7.5 版本以来，共有 26 个 contributors …...

编程日记 2023/5/12 16:48:52

HTML 颜色值

HTML 颜色值颜色由红 (R)、绿 (G)、蓝 (B) 组成。颜色值颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0 (十六进制为 00 )，最高值为 255 (十六进制为 FF )。十六进制值的写法为#号后跟三个或六个十六进制字符。三位…...

编程日记 2023/5/12 16:48:37

RabbitMQ-消息的可靠性投递

文章目录0. 什么是消息的可靠性投递1. confirm机制2. return机制3. 总结0. 什么是消息的可靠性投递在生产环境中，如果因为一些不明原因导致RabbitMQ重启，RabbitMQ重启过程中是无法接收消息的，那么我们就需要生产者重新发送消息。或者在消息…...

编程日记 2023/5/12 16:48:20

华为OD机试题 - 最小叶子节点（JavaScript）| 含思路

华为OD机试题最近更新的博客使用说明本篇题解：最小叶子节点题目输入输出示例一输入输出示例二输入输出Code解题思路华为OD其它语言版本最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD…...

编程日记 2023/5/12 16:48:06

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种低级字节码格式，可由高级语言（如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

Android15默认授权浮窗权限

我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2026/1/23 11:58:06