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. WP-PostViews Plus停止计数

    最近老是发现WP-PostViews Plus停止计数,网上查了资料才发现,WP Super Cache和WP-PostViews Plus存在冲突.根据自己网站目前的情况看,暂时用不到WP Supe ...

  2. jQuery的on方法和bind绑定多个事件

    on方法是官方推荐使用的方法比较新 1. on: 多个事件绑定同一个函数 $(document).ready(function(){ $("p").on("mouseov ...

  3. Indri中的动态文档索引技术

    Indri中的动态文档索引技术 戴维 译 摘要: Indri 动态文档索引的实现技术,支持在更新索引的同时处理用户在线查询请求. 文本搜索引擎曾被设计为针对固定的文档集合进行查询,对不少应用来说,这种 ...

  4. IE9下Coolite.Ext出现createContextualFragment错误

    解决Ext在IE9上报错“createContextualFragment”,只需要在使用Coolite.Ext页面加入如下代码即可: if ((typeof Range !== "unde ...

  5. Xcode 合并分支报错

    原理和操作步骤见如下转载的两篇文章, 我所使用的 svn 客户端软件是 Mac 下面的 Versions.app v1.06 这个版本包含一个多人开发的bug bug 的解决方案见我之前转载的两篇文章 ...

  6. 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理

    什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...

  7. sublime 配置

    Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自己 ...

  8. 在非MFC程序中引用CString

    CString在当今软件设计界里还是小有名气的,说它是MFC中使用的最多的类一点也不过,然而在使用sdk编windows程序的时候,确不能利用CString类,只能用sdk的运行时库,比如strlen ...

  9. codeforces #310 div1 D

    一开始写了个暴力模拟绳子的摆动轨迹 然后在Test 16 T掉了 后来%了一下别人的代码,发现需要对特殊情况进行特殊处理 首先我们考虑绳子的向右摆动,设当前位置为p,绳子当前长度为L 如果其旋转中心位 ...

  10. adb开启不了解决方案

    原文地址: adb开启不了解决方案 - vaecer - 博客频道 - CSDN.NET http://blog.csdn.net/vaecer/article/details/45894643   ...