CSS中关于多个class样式设置的不同写法
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样式设置的不同写法的更多相关文章
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- CSS:与input相关的一些样式设置问题
input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...
- wpf 中DataGrid 控件的样式设置及使用
本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </ ...
- Dev中GridControl的GridView 基本样式设置
基本样式图: 代码如下: /// <summary> /// gridView样式 /// </summary> /// <param name="gdv&qu ...
- 点击图片或者鼠标放上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 ...
- CSS中margin: 0 auto;样式没有生效
问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...
- table中某一个tr边框样式设置
<html> <head> <style type="text/css"> table{ width:500px; } table tr td{ ...
随机推荐
- 2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19)
2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19) easy: ABFGHI medium-ea ...
- 【2018ACM/ICPC网络赛】沈阳赛区
这次网络赛没有打.生病了去医院了..尴尬.晚上回来才看了题补简单题. K Supreme Number 题目链接:https://nanti.jisuanke.com/t/31452 题意:输入一个 ...
- 【csp】2018-3
第一题 跳一跳 题目: 题意:浅显.qwq 题解:2计数+1,到1就清空计数. 代码: #include<iostream> #include<cstdio> #include ...
- js面向对象编程:this究竟代表什么?第二篇
总觉得自己弄明确了js中this的含义.this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个非常奇怪的问题. 代码例如以下: ...
- oracle中的decode函数的使用
含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...
- input输入内容成可点击状态
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1. ...
- 笔记:Python实现二分查找
def search(sequence, number, lower=0, upper=None): if upper is None: upper = len(sequence) - 1 if lo ...
- python库之lightgbm
一.安装 https://blog.csdn.net/qq_40317897/article/details/81021958 参考文献: [1].LightGBM中文文档 https://light ...
- 「题解」:$Game$
问题 B: $Game$ 时间限制: 1 Sec 内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...
- duilib教程之duilib入门简明教程11.部分bug
一.WindowImplBase的bug 在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题, 1.最大化按钮的样式还是没 ...