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. Japan 2005 Domestic Cleaning Robot /// BFS 状压 二进制位运算 结构体内构造函数 oj22912

    题目大意: 输入w h,接下来输入h行w列的图 ' . ':干净的点:  ' * ' :垃圾:  ' x ' : 墙:  ' o ' : 初始位置: 输出 清理掉所有垃圾的最短路径长度 无则输出-1 ...

  2. Docker学习のDocker中部署静态页网站

    前言:部署一个静态页网站,我们需要 常见映射80端口的交互式容器 安装Nginx(或其他服务器) 安装文本编辑器vim 创建静态页面 修改Ngnix的配置文件 运行Ngnix 验证网站的防高温 一.设 ...

  3. CF886F Symmetric Projections

    题意:给你平面上n个点,问有多少条过原点的直线,使得这些点在该直线上的投影(做垂直,对应点)形成对称图形?n<=2000. 标程: #include<bits/stdc++.h> # ...

  4. AOP-面向切面编程-1

    将方法类比成一个积木,哪里需要执行插到哪里 视野角度就是将一个程序比作几条绳子的集合,每个集合是一堆方法的集合,那么把绳子截断,绳子的切面就是一堆方法中一个方法与另一个方法的交界处,将你需要的方法切入 ...

  5. 手写代码注意点 -- int[]

    int[].length char[] 的数组长度,是小写的l开头: char[].length; 不是:char[].Length int[] 没有.contains(), .indexOf() . ...

  6. 关于OpenLiveWriter出错的修补方法

    OpenLiveWriter使用一段时间后可能会打不开,提示错误如下: 这是只需要把电脑的.net更新到4.6以上版本就可以了.

  7. 17个方法防止dedeCMS织梦网站被黑挂木马

    dede织梦cms系统的程序存在漏洞,黑客攻击方法层出不穷,导致网站经常被黑,被百度安全中心等拦截,影响排名和流量,让站长非常头疼,下面总结一些防止dede织梦cms系统被攻击设置的方法,可有效的防止 ...

  8. Android Matrix理论与应用详解

    转:http://zensheno.blog.51cto.com/2712776/513652 Matrix学习——基础知识 以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GD ...

  9. Spark 读写数据、抽象转换 拾遗

    读 package com.test.spark import org.apache.spark.sql.{Dataset, Row, SaveMode, SparkSession} /** * @a ...

  10. a标签 href触发及传值

    var d=document.getElementById("exportA");alert(d.href);d.href="${ctx}/templet/tEdasTe ...