CSS——选择器
zhezhongyun 2025-05-21 17:56 13 浏览
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>
注：只有下一个兄弟背景变红，次下一个没有变红
实例：
三 总结
总结不易请点个小
相关推荐
- 激光手术矫正视力对眼睛到底有没有伤害?
-
因为大家询问到很多关于“基质不能完全愈合”的问题，有必要在这里再详细解释一下。谢谢@珍惜年少时光提出的疑问：因为手头刚好在看组织学，其中提到：”角膜基质约占角膜的全厚度的90%，主要成分是胶原板层，...
- OneCode核心概念解析——View(视图)
-
什么是视图？在前面的章节中介绍过，Page相关的概念，Page是用户交互的入口，具有Url唯一性。但Page还只是一个抽象的容器，而View则是一个具备了具体业务能力的特殊的Page,它可以是一个...
- 精品博文图文详解Xilinx ISE14.7 安装教程
-
在软件安装之前，得准备好软件安装包，可从Xilinx官网上下载：http://china.xilinx.com/support/download/index.html/content/xilinx/z...
- 卡片项目管理(Web)（卡片设计的流程）
-
简洁的HTML文档卡片管理，简单框架个人本地离线使用。将个人工具类的文档整理使用。优化方向：添加图片、瀑布式布局、颜色修改、毛玻璃效果等。<!DOCTYPEhtml><html...
- GolangWeb框架Iris项目实战-JWT和中间件(Middleware)的使用EP07
-
前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Tok...
- sitemap 网站地图是什么格式?有什么好处?
-
sitemap网站地图方便搜索引擎发现和爬取网页站点地图是一种xml文件，或者是txt，是将网站的所有网址列在这个文件中，为了方便搜索引擎发现并收录的。sitemap网站地图分两种：用于用户导...
- 如何在HarmonyOS NEXT中处理页面间的数据传递?
-
大家好，前两天的Mate70的发布，让人热血沸腾啊，不想错过，自学的小伙伴一起啊，今天分享的学习笔记是关于页面间数据伟递的问题，在HarmonyOSNEXT5.0中，页面间的数据传递可以有很多种...
- 从 Element UI 源码的构建流程来看前端 UI 库设计
-
作者：前端森林转发链接：https://mp.weixin.qq.com/s/ziDMLDJcvx07aM6xoEyWHQ引言由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界...
- jq+ajax+bootstrap改了一个动态分页的表格
-
最近在维护一个很古老的项目，里面是用jq的dataTable方法实现一个分页的表格，不过这些表格的分页是本地分页。现在想要的是点击分页去请求数据。经过多次的修改，以失败告终。分页的不准确，还会有这个错...
- 学习ES6- 入门Vue(大量源代码及笔记，带你起飞)
-
ES6学习网站：https://es6.ruanyifeng.com/箭头函数普通函数//普通函数this指向调用时所在的对象(可变)letfn=functionfn(a,b){...
- 青锋微服务架构之-Ant Design Pro 基本配置
-
青锋(msxy)-Gitee.com1、更换AntDesignPro的logo和名称需要修改文件所在位置：/config/defaultSetting.jsconstproSett...
- 大数据调度服务监控平台（大数据调度服务监控平台官网）
-
简介SmartKettle是针对上述企业的痛点，对kettle的使用做了一些包装、优化，使其在web端也能具备基础的kettle作业、转换的配置、调度、监控，能在很大一定程度上协助企业完成不同...
- Flask博客实战 - 实现博客首页视图及样式
-
本套教程是一个Flask实战类教程，html/css/javascript等相关技术栈不会过多的去详细解释，那么就需要各位初学者尽可能的先去掌握这些基础知识，当然本套教程不需要你对其非常精通，但最起码...
- Web自动化测试:模拟鼠标操作(ActionChains)
-
在日常的测试中，经常会遇到需要鼠标去操作的一些事情，比如说悬浮菜单、拖动验证码等，这一节我们来学习如何使用webdriver模拟鼠标的操作首页模拟鼠标的操作要首先引入ActionChains的包fro...
- DCS F-16C 中文指南 16.9ILS仪表降落系统教程
-
10–ILS教程我们的ILS（仪表着陆进近）将到达Batumi巴统机场。ILS频率：110.30跑道航向：120磁航向/126真航向无线电塔频率：131.0001.设置雷达高度表开关打开（前）并...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- 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)
- CSS 水平对齐 (Horizontal Align) (30)