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

CSS常用选择器

news 2025/11/7 13:48:17

目录

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的注册表&#xff0c;攻击的目标是注册表所在的机器&#xff0c;一般注册表和RMI Server在同一个机器上&#xff0c;特殊情况下也会在不同机器上。 在我们通过LocateRegistry#getRegistry获取到目标开启的注…...

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

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

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

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

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

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

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

GraphCut、最大流最小割定理

G&#xff08;V&#xff0c;E&#xff09;&#xff1b;V为点集&#xff0c;E为边集&#xff1b; 节点集V中的节点分为&#xff1a; &#xff08;1&#xff09;终端节点。不包含图像像素&#xff0c;用S和T表示。S为源点&#xff0c;T为汇点。图像分割中通常用S表示前景目标&a…...

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

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

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

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

Java分布式事务(二)

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

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

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

本篇讨论的是什么 从概念上讲&#xff0c;PCG&#xff08;程序化生成&#xff09;的含义很广&#xff1a;任何通过规则计算得到的内容&#xff0c;都可算作是PCG。但在很多游戏项目的资料&#xff0c;包括本篇&#xff0c;讨论PCG时特指是&#xff1a;用一些算法/工具(特别是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 位图的应用二、哈希切割&#xff08;处理海量数据&#xff09;三、布隆过滤器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一、什么是原子操作 原子操作是不可分割的&#xff0c;在执行完毕之前不会被任何其它任务或事件中断&#xff0c;可以视为最小的操作单元&#xff0c;是在执行的过程中、不会导致对数据的并发访问的、最小操作&#x…...

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

JavaScript Boolean 布尔对象

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

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

删除链表元素相关的练习

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

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

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

您的企业是否想过实现设计数据的统筹管理&#xff0c;在设计上实现标准化&#xff0c;并把每位设计工程师串联起来协同办公?中科赛凌通过使用3DEXPERIENCE Works 实现了上述内容&#xff0c;一起来看本期案例分享吧!中科赛凌 通过其自主研发的单压缩机制冷技术实现零下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) 组成。 颜色值 颜色值由十六进制来表示红、绿、蓝&#xff08;RGB&#xff09;。 每个颜色的最低值为 0 (十六进制为 00 )&#xff0c;最高值为 255 (十六进制为 FF )。 十六进制值的写法为#号后跟三个或六个十六进制字符。 三位…...

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

RabbitMQ-消息的可靠性投递

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

编程日记 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

嵌入式系统硬件设计与实践（开发过程）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 如果把电路设计看成是画板子的&#xff0c;这本身其实是狭隘了。嵌入式硬件设计其实是嵌入式系统中很重要的一个部分。里面软件做的什么样&#xf…...

编程日记 2023/5/12 21:06:37

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/4 16:34:38

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/11/7 7:51:30

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/10/28 1:33:47

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/10/8 16:37:52

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

编程新知 2025/11/4 7:35:55

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

编程新知 2025/11/3 10:20:51

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...

编程新知 2025/11/4 1:18:46