html中:

<div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="containerB"> 这是BBBBBBBBBBBBBBBBBBBBBB样式 </div> </div>

css中:

.containerA .containerB {
color: red;
font-size: 28px;
}

.containerA ,.containerB { color: red; font-size: 28px; }

这两种写法是有区别的,前者用空格隔开,表示接下来对A下面的B样式进行修改。

如图:

而后者用逗号隔开,表示接下来对A和B两者的样式都进行修改。

如图:

虽然,我们再用的时候往往两者没啥区别,但是还是要理解它的原理,有时候在一些样式需要change的时候(用空格分开)还是很管用的!

---------------------
作者:黑子Kuroko
来源:CSDN
原文:https://blog.csdn.net/fifteen718/article/details/51149114
版权声明:本文为博主原创文章,转载请附上博文链接!

CSS中关于多个class样式设置的不同写法的更多相关文章

  1. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  2. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  3. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  4. CSS:与input相关的一些样式设置问题

    input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...

  5. wpf 中DataGrid 控件的样式设置及使用

    本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </ ...

  6. Dev中GridControl的GridView 基本样式设置

    基本样式图: 代码如下: /// <summary> /// gridView样式 /// </summary> /// <param name="gdv&qu ...

  7. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  8. CSS中margin: 0 auto;样式没有生效

    问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...

  9. table中某一个tr边框样式设置

    <html> <head> <style type="text/css"> table{ width:500px; } table tr td{ ...

随机推荐

  1. Fedora25安装mariadb并设置权限

    MariaDB版本10.1.21 Fedora版本25 1.Change root user sudo -i 2. dnf install -y mysql dnf install -y mariad ...

  2. 《parsing techniques》中文翻译和正则引擎解析技术入门

    http://parsing-techniques.duguying.net/ (中文版) https://swtch.com/~rsc/regexp/ https://blog.csdn.net/m ...

  3. thinkphp 比较标签

    比较标签用于简单的变量比较,复杂的判断条件可以用if标签替换,比较标签是一组标签的集合,基本上用法都一致,如下: <比较标签 name="变量" value="值& ...

  4. thinkphp action参数绑定

    参数绑定是通过直接绑定URL地址中的变量作为操作方法的参数,可以简化方法的定义甚至路由的解析. 参数绑定功能默认是开启的,其原理是把URL中的参数(不包括模块.控制器和操作名)和操作方法中的参数进行绑 ...

  5. FP function programming

    fp是函数式编程,也是一种编程方法,同面向对象的编程方法一样. 所谓的functional programming 就是函数式编程,这也是一种编程方法,或者说是编程模式,同面向过程的编程,以及面向对象 ...

  6. VS2010-MFC(MFC常用类:定时器Timer)

    转自:http://www.jizhuomi.com/software/232.html 前面一节讲了CTime类和CTimeSpan类的使用,本节继续讲与时间有关的定时器.定时器并不是一个类,主要考 ...

  7. Vue学习笔记——Vue-router

    转载:https://blog.csdn.net/guanxiaoyu002/article/details/81116616 第1节:Vue-router入门 .解读router/index.js文 ...

  8. System Verilog的概念以及与verilog的对比

    以下内容源自:http://blog.csdn.net/gtatcs/article/details/8970489 SystemVerilog语言简介 SystemVerilog是一种硬件描述和验证 ...

  9. 十条服务器端优化Web性能的技巧总结

    原文地址:http://www.jb51.net/yunying/452723.html 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网 ...

  10. Mysql优化系列之数据类型优化

    本篇是优化系列的第一篇:数据类型 为了不产生赘述,尽量用简洁的语言来描述. 在选择数据类型之前,首先要知道几个原则: 更小的通常更好 尽量使用可以正确存储数据的最小数据类型.更小的数据类型意味着更快, ...