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. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  2. zabbix 监控web网站性能

    一直在纠结用什么实例来给大家演示呢?想来想去还是官方的好,那我们怎么用zabbix监控web性能和可用性呢?我们这边分为几个步骤:打开网站.登陆.登陆验证.退出,一共4个小step,看实例. 检测流程 ...

  3. hbase-0.94 Java API

    Hierarchy For Package org.apache.hadoop.hbase Package Hierarchies: All Packages Class Hierarchy java ...

  4. mysql中now()函数的使用,还有oracle的sysdate,可能埋下的坑

    mysql中now()函数的使用,还有oracle的sysdate 在需求中如果系统中药添加当前操作的时间那么很简单的一个操作在写sql的时候直接在这个字段对应的位置写上now()函数就可以了,这样就 ...

  5. npm 使用记录

    在 Mint 下安装 pencil,折腾半天,发现它对 firefox 的支持,只到 46.0 .本来打算研究下怎么用 xulrunner 来跑 pencil 这个 web 应用,查看项目资源的时候, ...

  6. HDU1086You can Solve a Geometry Problem too(判断线段相交)

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  7. BZOJ4285: 使者

    搞出dfs序,转化为查询矩形点数,树套树搞定. #include<cstdio> #include<cstdlib> #define N 100005 #define IF e ...

  8. GridView 动态添加绑定列和模板列

    动态添加绑定列很简单:例如: GridView1.DataSourceID = "SqlDataSource1"; BoundField bf1 = new BoundField( ...

  9. centos7 没有iptables服务 file or directory? 用secureCRT登录centos?

    cenetos7 采用systemd来管理服务 centos7 没有采用传统的iptables服务, 而是采用的firewalld 服务, 以及firewall-cmd 命令; 也可以采用传统的 ip ...

  10. JDI tutorial （trace example）

    Components Debugger Interfaces / |--------------| / | VM | debuggee ----( |--------------| <----- ...