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. vue3+node全栈项目部署到云服务器

    一.前言 最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和 ...

  2. IDEA与Tomcat的相关配置说明

    1.IDEA会为每个Tomcat部署的项目单独建立一份配置文件 查看控制台的log输出:Using CATAINA_BASE 2.工作空间项目和Tomcat部署的web项目 WEB-INF:内的资源不 ...

  3. abstract类中method

    一.abstract的method是否可同时是static,是否可同时是native,是否可同时是synchronized? 都不可以,因为abstract申明的方法是要求子类去实现的,abstrac ...

  4. Future Parttern 先给你这张提货单

    Future是未来,预期的意思,Thread-permessage模式是指将任务交给其他线程来做,但是如果想知道处理的结果,就要使用Future模式,它的典型应用时执行一个需要花一些时间的方法,会立即 ...

  5. 2019牛客暑期多校训练营(第八场)I-Inner World DFS序+主席树(扫描线也可)

    题目传送门 题意:初始有n棵树,每棵树都只有1个n号节点,现在有m次添加操作,每次操作是将$[l,r]$范围内的树的$u$节点后面添加一个$v$节点.每个v节点只会被添加一次. 然后是q次询问,输出$ ...

  6. PHP算法之回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121输出: true示例 2: 输入: -121输出: false解释: 从左向右读, ...

  7. Android开发 解决Installation failed due to XXX 问题

    报错信息 Android studio 安装app的时候以下报错 Installation did not succeed. The application could not be installe ...

  8. python中与time模块和datetime模块相关操作

    使用time模块计时程序运行时长 import time time_start = time.time() #程序主体部分 time_end = time.time() print('总耗时: ', ...

  9. jenkins实现不同角色查看不同视图

    1.安装插件Role-based Authorization Strategy 2.开启插件 系统管理>>>全局安全配置 3.创建角色和用户 4.登陆查看,只能看到travel开头的 ...

  10. Map按键排序(sort by key)

    1.需求:已知有如下map,要求按照key倒序排列遍历. Map<String, Integer> map = new HashMap<>(); map.put("1 ...