CSS——选择器
zhezhongyun 2025-05-21 17:56 4 浏览
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>
注：只有下一个兄弟背景变红，次下一个没有变红
实例：
三 总结
总结不易请点个小
相关推荐
- 办公小技巧:杜绝意外 让字体永不丢失
-
当精心编辑的文档，在其它电脑上打开时，最常见的问题就是页数增加了，表格被撑破了，有些严重的甚至会出现乱码……为什么会这样呢？究其根源都是因为缺少相应的字体。本文介绍各类文档中（包括Word文档、PPT...
- 网站速度优化:从10秒到2秒的极致性能提升方案
-
核心内容：性能诊断工具：PageSpeedInsights与Lighthouse的评分差异解读。WebPageTest多地区、多设备性能对比。前端优化：CSS/JS压缩与合并的自动化方案（如Webp...
- 如何在WordPress中删除谷歌字体(2种简单方法)
-
许多WordPress主题都会用Google字体，然而，Google字体并不存储在网站本地，它是一个第三方资源，这会影响网站的加载速度，让网站变慢，尤其当你的网站面向的是国内用户时，更需要禁用Goog...
- 2019年免费可商用字体大全(附打包下载)
-
私信“字体”可免费获得。附送一个几十G的，有商业授权要求的字体包！不说那么复杂了，简单讲，可能你下载的大多数字体都是收费的。比如方正、文鼎、汉仪等的90%以上需要商业授权，甚至个人授权。这儿的授权，指...
- 开源免费、美观实用的后台管理系统模版，简单轻量、开箱即用!
-
项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模版，专注于用户体验和快速开发的开源后台管理解决方案。基于ElementPlus设计...
- 【推荐】一款开源免费、美观实用的后台管理系统模版
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模...
- 想要字体图标设计师却给了SVG?没关系，自己转
-
本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自Mater...
- 零基础教你学前端——66、CSS谷歌字体和Icon图标
-
我们学习CSS谷歌字体和CSSIcon图标。我们在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体。谷歌字体是免费使用的，并且有1000多种字体...
- 必须掌握的前端开发基础知识，什么是字体图标?
-
必须掌握的前端开发基础知识,什么是字体图标?显示隐藏元素display显示隐藏none隐藏block显示隐藏后不再占有原来的位置visibility隐藏元素后,继续占有原来的位置visible元...
- 让你的网站速度提升10倍!(四):压缩~~~
-
在前面的内容中讲了如何降低页面大小（给页面瘦身）,重点讲的是如何优化图片，而没有讲文本内容如何优化，这是因为与其辛苦的优化文本还不如使用我们的秘密武器：Gzip压缩！如果你还不清楚Gzip是什么，看这...
- MFC转QT - Qt界面开发 - 常用控件
-
基础控件(QPushButton,QLabel,QLineEdit等)按钮控件族Qt提供了丰富的按钮控件，比MFC的按钮控件更加细分和功能丰富。QPushButton（标准按钮）//创建按钮...
- 使用CSS实现苹果官网文字渐入效果
-
效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。渐变文字渐变文字该如何实现呢？这是实现这个效果的关键...
- HarmonyOS NEXT - ArkUI: Text组件
-
Text组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。文本样式的属性如下表：.f...
- 计算机网络的 166 个核心概念，你知道吗?
-
上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...
- 软网推荐:请个多功能纯文本管理助手
-
纯文本不单是指常用的语言文字，还包括各种类型的程序代码、编码等。作为常用的纯文本处理工具，“记事本”显得力不从心。我们可用一款免费软件AlternateTextbrowser，随心所欲地管理各种类型...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)