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. ASP.NET Core Web应用在发布时选择是否对视图进行编译

    原文:ASP.NET Core Web应用在发布时选择是否对视图进行编译 在我们发布ASP.NET Core Web应用程序时,选择以文件形式发布,发布方法选择文件系统 默认情况下,会把Views的视 ...

  2. java_函数式编程写法

    package cn.aikang.Test; import org.junit.Test; import java.util.Scanner; import java.util.function.S ...

  3. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

  4. 数据库MySQL--数据操作语言DML(插入、修改、删除)

    例子文件:https://files-cdn.cnblogs.com/files/Vera-y/girls.zip 一.插入 方式一: 语法: insert into 表名(列名,.....) val ...

  5. Sublime Text最舒服的主题

    Theme - Afterglow (官网链接) 贴上 preferences -> settings 里面的配置 { "theme": "Afterglow-gr ...

  6. LeetCode第二题—— Add Two Numbers(模拟两数相加)

    Description: You are given two non-empty linked lists representing two non-negative integers. The di ...

  7. cocos2D-X 常用功能封装

    Packaging_Kernel.h #pragma once #include <string> #include <map> #include <vector> ...

  8. hibernate_02_hibernate的入门

    1.什么是Hibernate框架? Hibernate是一种ORM框架,全称为 Object_Relative DateBase-Mapping,在Java对象与关系数据库之间建立某种映射,以实现直接 ...

  9. UVA-11987-Almost Union-Find-并查集的基本操作合并、删除、移位

    I hope you know the beautiful Union-Find structure. In this problem, you’re to implement something s ...

  10. Berlekamp Massey算法求线性递推式

    BM算法求求线性递推式   P5487 线性递推+BM算法   待AC.   Poor God Water   // 题目来源:ACM-ICPC 2018 焦作赛区网络预赛 题意   God Wate ...