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>

最新文章

  1. 免费公开课 | 机器学习的第二次入门
  2. 什么是 WMI?From MSDN
  3. Gentoo 安装日记 04 (开启ssh服务,ssh登录虚拟机)
  4. html语言怎么那么难用,css语言难学吗?
  5. Linux下查看某个进程的网络带宽占用情况
  6. java 的构造函数修饰符public private protected
  7. Python输出当前时间
  8. 集成unittest与html测试报告
  9. 基于opencv的摄像头脸部识别抓取及格式储存(python)
  10. 5G信道编码技术取得新突破,极化码同时满足ITU三大应用需求
  11. sap固定资产号码范围_SAP--FI详细解---固定资产
  12. android ukey,Tenorshare 4uKey for Android
  13. UE4 蓝图入门学习笔记
  14. Python获取地理数据 匹配中文城市所属省份
  15. 开源SDK实现Android视频直播
  16. css 侧栏跟随_JS+CSS实现侧边栏跟随浏览器滚动效果
  17. 电脑无法复制粘贴是什么情况,附上解决方法
  18. ATmi-G 公众号机器人 【永久免费】
  19. 嵌入式学习(3)ADC、DMA、通信方式
  20. python pip命令安装包

热门文章

  1. echarts之静态与动态地图
  2. 科普类:什么是量子霸权?
  3. Linux 常用命令大全(虚拟机)
  4. CSDN【精品专栏】第六期
  5. jquery实现截取pc图片_Cropper.js 实现裁剪图片并上传(PC端)
  6. 国产软件的「硬替代」与「软着陆」之辨
  7. 【Word】关闭段落/表格等首字母大写功能
  8. cad渐开线齿轮轮廓绘制_CAD渐开线齿轮怎么画?
  9. 【MySQL 数据库】JDBC 编程之 Java 连接 MySQL
  10. GNS3-GREvpn