.class .class 和 .class.class 和 .class>.class 比较
2024-04-28 15:15:11
css .class .class 和 .class.class 和 .class>.class 比较
1、.a.b
选择同时具有 .a 和 .b 的元素 , 且优先比使用单独的class要高
<style>.box {width: 200px;height: 150px;border: 1px solid red;}.four {background-color: blue;}.box.one {background: yellow;}
</style>
<div class="box one">div-one</div>
<div class="box one four">div-four</div>
2、.a .b
(中间有空格) 选择 .a 元素 的 .b 子元素 , 且优先比使用单独的class要高
<style>.one {width: 200px;height: 100px;font-weight: 600;border: 1px solid red;}.one .two {color: aqua;}.three {color: blue;}.one .three {color: red;}
</style>
<div class="one">1<div class="two">2<div class="three">3</div></div>
</div>
3、.a > .b
选择 .a 元素 的 直属子元素 .b ,非直属则无效, 且优先比使用单独的class要高
<style>.one {width: 200px;height: 100px;font-weight: 600;border: 1px solid red;}.two {color: black;}.one > .two {color: aqua;}.one > .three {color: red;}
</style>
<div class="one">1<div class="two">2<div class="three">3</div></div>
</div>
最新文章
- 免费公开课 | 机器学习的第二次入门
- 什么是 WMI?From MSDN
- Gentoo 安装日记 04 (开启ssh服务,ssh登录虚拟机)
- html语言怎么那么难用,css语言难学吗?
- Linux下查看某个进程的网络带宽占用情况
- java 的构造函数修饰符public private protected
- Python输出当前时间
- 集成unittest与html测试报告
- 基于opencv的摄像头脸部识别抓取及格式储存(python)
- 5G信道编码技术取得新突破,极化码同时满足ITU三大应用需求
- sap固定资产号码范围_SAP--FI详细解---固定资产
- android ukey,Tenorshare 4uKey for Android
- UE4 蓝图入门学习笔记
- Python获取地理数据 匹配中文城市所属省份
- 开源SDK实现Android视频直播
- css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果
- 电脑无法复制粘贴是什么情况,附上解决方法
- ATmi-G 公众号机器人 【永久免费】
- 嵌入式学习(3)ADC、DMA、通信方式
- python pip命令安装包