1.时常见到css的这两种种写法:

a.两个class隔空格连一起:

.class1 .class2{......}

b.两个class隔逗号连一起:

.class1,.class2{......}

2.举两个例子说明:

两个class隔空格连一起,例A:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>两个class隔空格连一起</title>
<style type="text/css">
.classDiv {
height: 200px;
width: 200px;
background-color: aqua;
}
.classDiv .classP {
color: hotpink;
background-color: #e7e7e7;
}
</style>
</head>
<body>
<div class="classDiv">
<p class="classP">
.classDiv .classP对我生效
</p>
.classDiv .classP对我无效
</div>
<p class="classP">
.classDiv .classP对我生效
</p>
</body>
</html>

例A结果:

两个class隔逗号连一起,例B:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>两个class隔逗号连一起</title>
<style type="text/css">
.classDiv {
height: 200px;
width: 200px;
background-color: aqua;
}
.classDiv .classP {
color: hotpink;
background-color: #e7e7e7;
}
</style>
</head>
<body>
<div class="classDiv">
<p class="classP">
.classDiv .classP对我生效
</p>
.classDiv .classP对我无效
</div>
<p class="classP">
.classDiv .classP对我生效
</p>
</body>
</html>

例B结果:

3.结果说明:

a写法只对两个class中的后者有效,前者起到过滤的作用;b写法对所有class都有效。

.class1 .class2{......}

(十三)学习CSS之两个class连一起隔空格和逗号的更多相关文章

  1. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  2. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  3. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  4. 学习CSS的思路(转)

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  5. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  6. CSS 简介,学习 CSS 必看

    CSS 表示的是层叠样式表,学习 CSS 之前我们必须要掌握 HTML 和 XHTML 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 ...

  7. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  8. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...

  9. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  2. DataGrid中取HyperLinkColumn列的值,处理DataGrid中绑定的特殊字符

    DataGrid中取HyperLinkColumn列的值. /// <summary> /// 对datagrid中标签进行编码,处理特殊字符 /// </summary> / ...

  3. 【MyBatis】 通过包含的jdbcType类型

    BIT         FLOAT      CHAR           TIMESTAMP       OTHER       UNDEFINED TINYINT     REAL       V ...

  4. 主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS

    作者: fmamcn, 发布日期: 2012-09-29 12:28:39, 浏览数: 1567 看了狼魂发表的将kindeditor中的代码高亮插件prettify换为SyntaxHighlight ...

  5. poj 3207 Ikki's Story IV - Panda's Trick (2-SAT)

    http://poj.org/problem?id=3207 Ikki's Story IV - Panda's Trick Time Limit: 1000MS   Memory Limit: 13 ...

  6. ssh scp访问ipv6地址

    从这里学来的.http://blog.mattandanne.org/2012/01/sftpscp-and-ipv6-link-local-addresses.html当采用ipv6的地址去连接另外 ...

  7. Delphi XE5 android 蓝牙通讯传输

    不多讲,直接上代码了. 代码来自网络 http://files.cnblogs.com/nywh2008/Bluetooth_LEDs_android.rar

  8. Java 8 vs. Scala(一): Lambda表达式

    [编者按]虽然 Java 深得大量开发者喜爱,但是对比其他现代编程语言,其语法确实略显冗长.但是通过 Java8,直接利用 lambda 表达式就能编写出既可读又简洁的代码.作者 Hussachai ...

  9. linux查看在线用户 who命令参数及用法

    linux who 命令 详解 Linux最常用命令之一 功能说明:显示目前登入系统的用户信息. 语 法:who [-Himqsw][--help][--version][am i][记录文件] 补充 ...

  10. 函数可重入问题reentrant functions(函数执行过程中可以被中断,允许多个副本)

    最近经常听到这个名词,以前也听到过,不过接触更多的是“线程安全问题”,而且本人也一直理解的是两个名字的含义是一样的.今天仔细总结一下这个名词相关的概念. 引用博文:可重入函数和不可重入函数 (http ...