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. exec php

    $m = memory_get_usage(); echo $m; require_once('include/entryPoint.php'); // for ($i=0; $i < 5000 ...

  2. Mac技巧之让U盘、移动硬盘在苹果电脑和Windows PC都能识别/读写，且支持4GB大文件：exFAT格式

    如果您的 U 盘.移动硬盘既要用于 PC 又要用于苹果电脑,Mac OS X 系统的 HFS+ 和 Windows 的 NTFS 格式显然都不行……HFS+ 在 Windows 下不识别,NTFS 格 ...

  3. jquery easyui无法绑定下拉框内容

    最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...

  4. sshj ,ssh , springmvc pom.xml

    记录下项目中的 pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  5. replace()替换文字

    var test = text.innerHTML; b = test.replace(/任晓强/g,"你好"); console.log(b); html: <div id ...

  6. socket选项自带的TCP异常断开检测

    TCP异常断开是指在突然断电,直接拔网线等等情况下,如果通信双方没有进行数据发送通信等处理的时候,无法获知连接已经断开的情况. 在通常的情况下,为了使得socket通信不受操作系统的限制,需要自己在应 ...

  7. POJ2528+线段树

    见代码. /* 线段树+Lazy 题意:有一面墙,被等分为1QW份,一份的宽度为一个单位宽度. 现在往墙上贴N张海报,每张海报的宽度是任意的,但是必定是单位宽度的整数倍,且<=1QW. 后贴的海 ...

  8. Time.deltaTime 含义和应用

    第一種:使用Time.deltaTime 一秒內從第1個Frame到最後一個Frame所花的時間,所以不管電腦是一秒跑60格或者一秒30格.24格,值都會趨近於一. 就結果而言,deltaTime是為 ...

  9. CodeForces152C——Pocket Book(排列组合问题)

    Pocket Book DescriptionOne day little Vasya found mom's pocket book. The book had n names of her fri ...

  10. 中断服务程序不用interrupt关键字也可实现中断，该关键字是否必须？

    2013-06-20 11:13:35 中断服务程序不用interrupt关键字也可实现中断,该关键字是否必须? 使用tools->pin connect,将INT5与pin.txt关联,模拟外 ...