css选择器的格式，规定不带空格的选择条件之间是“且”关系，带空格的是“父子”关系，并且可以是非直接的“父子”关系

 <style>

 .e1.e2

 {

 background-color:yellow;

 }

 .father .e3

 {

 background-color:green;

 }

 </style>

 </head>

 <body>

 <div class="father">

 <p class="e1 e2">我住在 Duckburg。</p>

 <p class="e3">我也住在 Duckburg。</p>

 <div><p class="e3">他也住在 Duckburg。</p></div>

 </div>

 </body>

上面的代码中第一个段落p有两个class，e1和e2，注意，class属性的空格和css的空格不一个意思的，class属性的空格是“且”的关系，而刚说的css的空格是“父代与后代”的关系。

第一个p被渲染为了黄色，是因为css用了.e1.e2的选择器给他设定了这个颜色，就是这个段落同时有这两个类。当然，css里面不用.e1.e2只用.e1也可以实现同样的效果，不过有些时候我们不希望css选择器误命中其它的标签，就这么细写了。

第二p被.father .e3渲染为了绿色，是因为这p的class是e3，而且是class为father的标签的后代，所以被染为绿色。

同理，第三个p，虽然不是father的直接子类，但同样变为绿色，说明这种带空格的选择器可以包含间接的后代。

CSS中定义CLASS时，中间有空格和每空格的区别的更多相关文章

  1. CSS中定义CLASS时，中间有空格和没空格的区别是什么？

    .example .pp{ color: orange; } .example.pp2 { color: green; }如上面的两个定义一个是中间有空格,一个是中间没空格. 第一个class要这样写 ...

  2. 在php中定义常量时,const与define的区别?

    问]在php中定义常量时,const与define的区别?  [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...

  3. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  4. css中定义变量

    css中定义变量 定义变量可分多种情况: 1.定义全局变量 :root { --borderColor: #ccc;} 2.定义某元素下的变量 .look{ --borderColor: #ccc;} ...

  5. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://blog.snsgou.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...

  6. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  7. 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料 ...

  8. CSS中定义a:link、a:visited、a:hover、a:active顺序

    a :link.a:hover.a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同. eg:让未访问链接颜色为red,活动链接为yellow,已访问链接为green ...

  9. 在php中定义常量时，const和define的区别？

    使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很多. 1.const用于类成员变量的定义,一经定义,不可修改.Def ...

随机推荐

  1. gdb调试常用实用命令和core dump文件的生成

      1.生成core dump文件的方法: $  ulimit -c //查看是否为0 如果为0 $   ulimit -c unlimited 这样在程序崩溃以后会在当前目录生成一个core.xxx ...

  2. c# Newtonsoft.Json序列化和反序列 js解析

    Newtonsoft.Json下载地址:http://www.newtonsoft.com/products/json/ 参考:      http://www.cnblogs.com/yanweid ...

  3. ubuntu搭建shad(-_-)owscoks(影梭)

    准备步骤 apt-get updateapt-get install python-gevent python-pippip install shadowsocks 新建一个json文件内容如下,文件 ...

  4. UI: 多窗口

    1.自定义帮助类,用于简化 SecondaryView 的管理UI/MultipleViews/SecondaryViewHelper.cs /* * SecondaryViewHelper - 自定 ...

  5. c# 备份数据库恢复数据库

    /// <summary> /// 对数据库的备份和恢复操作,Sql语句实现 /// </summary> /// <param name="cmdText&q ...

  6. Python学习 过程中零散知识点的总结

    自学资料比较零碎,本文是对在Python学习过程中积累的零零散散的知识点的总结 ============================================================ ...

  7. signalr服务端-基础搭建

    signalr 支持 iis托管.winform.windowsservices.wpf 托管 这里我采用winfrom托管 首先画一个这样的窗体 在服务项目通过项目管理包安装signalr类库 安装 ...

  8. Install Docker on Ubuntu

    Install Docker on Ubuntu Estimated reading time: 17 minutes Docker is supported on these Ubuntu oper ...

  9. JS复习--更新结束

    js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...

  10. css3 动画效果 总结 不断完善~~

    1.transition 动画过程改变某个css属性的效果 (比如宽高 颜色) 语法 transition:    all  所有元素                                + ...