CSS——选择器
moboyou 2025-06-13 07:52 9 浏览
css既是层叠样式表，通过它可以装饰html网页，使其变漂亮，而怎么变呢？就要通过css选择器了，选择html标签再设置其属性及其属性值就OK啦
一 单一选择器
1、标签选择器（元素选择器）：标签{}
CSS:<style>P{color：red} <style>
HTML:<P>测试</P>
2、ID选择器：#{}
CSS:<style>#{color：red} <style>
HTML:<P id=“P1”>测试</P>
注意：id表示标签的name,故只能唯一，且命令规则为：数字、字母、下划线
3、类选择器（class）：人以群发，物以类聚，将一类标签设为同一个样式，很实用
CSS:<style>.P2{color：red} <style>
HTML:<P class=“P2”>测试</P>
<a class=“P2” href="#">ceshi</a>
4、 通配符选择器（*）
CSS:<style>*{color：red} <style>
所有标签均受影响，不建议用。
二 组合选择器
1 、后代选择器（任意后代,空格）
CSS：.dingbu p{color:red}(div的后代所有p)
HTML: <div class="dingbu">
<ul>
<li><a href="#">测试</a></li>
</ul>
<p> 测试1</p>
</div>
2、交集选择器（并列写且没空格）
CSS: h3.sp {color:red;}
html: <h3 class="sp">交集选择1</h3>
<h3 >交集选择2</h3>
<a class="sp">我没被选择</a>
实例--只有是标签h3且class为sp 样式才会改变
3、并集选择器（分组选择器，“，”）
CSS：h3,a {color:red;}
HTML:<ul>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
</ul>
<h3 class="sp">交集选择1</h3>
<h3 >交集选择2</h3>
实例：
css3选择器
4、儿子选择器（一个直系后代选择器，“>”）
CSS:div>p{background:yaqua}
HTML:<!--正确-->
<div>
<p>nihao</p>
</div>
<!--错误-->
<div>
<ul>
<li><p>nihao</p></li>
<li>hahahahahha</li>
</ul>
</div>
实例：
5、序选择器（按顺序选择，“：”）
CSS: ul li:first-child {color:yellow;}
ul li:last-child {color:red;}
HTML:<ul>
<li>ceshihah</li>
<li>测试</li>
<li>测试2</li>
</ul>
实例：
6、下一个兄弟选择器（同级，“+”）
CSS: h1+p{color:red;}
html:<h3>交集选择1</h3>
<p >交集选择2</p>
<p >交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
<h3 >交集选择1</h3>
<p>交集选择2</p>
<p>交集选择3</p>
注：只有下一个兄弟背景变红，次下一个没有变红
实例：
三 总结
总结不易请点个小
相关推荐
- Util应用框架基础(二)- 面向切面编程(AOP)
-
面向切面编程(AOP)Util应用框架横切关注点处理本节介绍Util应用框架对横切关注点的处理.文章分为多个小节,如果对设计原理不感兴趣,只需阅读基础用法部分即可.概述有些问题需要在系统中全局处理,比...
- QQ假红包生成器（恶搞qq红包假红包生成）
-
软件名称：QQ假红包生成器软件大小：892.37KB运行平台：安卓软件说明：本软件由iapp编写，所以全被安全软件误报。作者也把软件免杀了，但免杀版无法在5.0系统的手机上安装，安装非免杀版即可...
- 如何用云虚拟主机搭建一个影视网站
-
大家好，今天教大家使用云虚拟主机搭建一个影视网站的教程，本教程使用的是苹果CMS系统搭建。清空虚拟主机在开始安装网站之前，先要清空下虚拟主机。因为虚拟主机开通成功后，一般都会有一个默认网页文件，直接...
- 小白快速掌握!目前最有效玩客云刷机法之玩客云刷魔改版iStoreOS
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：最佳男煮角来来咯，我又来咯，为方便小白快速掌握刷机流程，我在每一篇文章里都是尽可能一步一图一解读的，而最最基础的准备直接点击我的文章《什么，...
- AI七个月突破数学家“围剿”反超人类，14位数学家深挖原始推理token:不靠死记硬背靠直觉
-
从只能答对2%的题目，到在超难数学题集中刷下22%得分，甚至超过人类团队平均水平，大模型需要多长时间？现在，令数学家们都惊讶的结果已经尘埃落定：7个月。发生在大名鼎鼎的“专为为难大模型而生的”Fron...
- 1.5B刷新数学代码SOTA!快手清华精细Token管理，LLM推理能力飙升
-
Archer团队投稿量子位|公众号QbitAI当大模型在数学题和代码任务里“卷”参数规模时，一支来自快手和清华的团队给出了不同答案——他们用1.5B参数的小模型，在多个推理基准上干过了同量级S...
- 抢票软件刷走200张，黄牛代码篡改系统，看球还敢信“代抢”吗?
-
7月4日晚无锡警方抓了两个人，他们用电脑程序抢了200多张苏超比赛门票，赚了1万5。现在苏超比赛场场爆满，抢票软件、黄牛倒票成了大问题。网上有人晒高价票，有人说自己被“代抢”骗了钱。黄牛倒票分三类：有...
- 大模型转行土木工程，首个「打灰人」评估基准:检验读、改工程图纸能力
-
首个工程自动化任务评估基准DrafterBench，可用于测试大语言模型在土木工程图纸修改任务中的表现。通过模拟真实工程命令，全面考察模型的结构化数据理解、工具调用、指令跟随和批判性推理能力，研究结...
- 仅用一行代码实现全网站暗黑模式（仅用一行代码实现全网站暗黑模式怎么办）
-
开源项目推荐：uViewPro正式开源！70+Vue3组件重构完成，uni-app组件库新选择推荐文章：element-plus同款主题换肤动画如何实现？-附完整源码经历了PMP和软...
- “少写一行代码，5分钟狂刷一次下载，开发者8000美元就这么烧没了!”
-
只因为漏写了一行代码，macOS录屏工具ScreenStudio的开发者AdamPietrasiak意外烧掉了8000美元的流量费，连带着还让部分用户断了网。一个看起来微不足道的自动...
- IE法提取网页数据（如何提取网页中的表格）
-
【分享成果，随喜正能量】我们不良的行为、不善的念头、不好的言语，都属于我们内心的暴力，要想获得平和，我们需要自我修习，学会控制情绪，学会内观反省并接近善良。。《VBA信息获取与处理》教程是我推出第六套...
- 从abc起步学做网站(4)（abc是哪几个网站）
-
上一次我们做了一个大多数网站使用的模板，带有顶部、左侧导航、右侧主内容、底部等板块。现在我们把它逐步扩展成一个论坛。一个论坛的基本功能有注册，登陆，发帖，回帖，看帖，删帖等，我们一步步来做。首先大多数...
- 黑客命令第16集:47种最常见的**网站方法2/2
-
31.工具1:网站猎手2:大马一个关键字:切勿关闭Cookies功能，否则您将不能登录插入diy.asp32.关键字:Team5StudioAllrightsreserved默认数据库:dat...
- 安卓最有名的网页编辑器（安卓网页设计工具）
-
安卓平台上有几款较为知名的网页编辑器，如Quoda、DroidEdit等，它们凭借丰富的功能和良好的用户体验受到广泛关注，以下是具体介绍：-Quoda：是一款强大的免费多语言代码编辑器，支持HTM...
- 918国际导航免费分享一款简洁模板+整站程序+数据打包-yungui
-
918国际导航免费分享一款简洁模板+整站程序+数据打包国际导航模板说明：搜索栏背景是动态型的，为了简洁本站没有搜索框以及文章页，只有首页一个，这样可以满足大部分人的需求了，毕竟大家只是大家导航而已...
- 一周热门
- 最近发表
-
- Util应用框架基础(二)- 面向切面编程(AOP)
- QQ假红包生成器（恶搞qq红包假红包生成）
- 如何用云虚拟主机搭建一个影视网站
- 小白快速掌握!目前最有效玩客云刷机法之玩客云刷魔改版iStoreOS
- AI七个月突破数学家“围剿”反超人类，14位数学家深挖原始推理token:不靠死记硬背靠直觉
- 1.5B刷新数学代码SOTA!快手清华精细Token管理，LLM推理能力飙升
- 抢票软件刷走200张，黄牛代码篡改系统，看球还敢信“代抢”吗?
- 大模型转行土木工程，首个「打灰人」评估基准:检验读、改工程图纸能力
- 仅用一行代码实现全网站暗黑模式（仅用一行代码实现全网站暗黑模式怎么办）
- “少写一行代码，5分钟狂刷一次下载，开发者8000美元就这么烧没了!”
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- oracle两个表 (20)
- oracle 数据库 字符集 (20)
- matlab化简多项式 (20)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- mysql数据库源码 (21)
- php开源万能表单系统源码 (21)