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. Java static 静态代码块执行分析

    假设有这样一个类: public class Utils { static { Log.i("static","isLoad!"); } public stat ...

  2. 一些有用的configue参数

    --prefix 指定文件被安装到文件系统中的目录名.例:--prefix=/usr/local/apache --enable-layout 该选项允许你选择一个预先定义好的文件系统结构,也就是可以 ...

  3. hdu3530 单调队列

    Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. 理解Cookie和Session机制(转)

    目录[-] Cookie机制 什么是Cookie 记录用户访问次数 Cookie的不可跨域名性 Unicode编码:保存中文 BASE64编码:保存二进制图片 设置Cookie的所有属性 Cookie ...

  5. Android 适配知识点

    转载:https://gold.xitu.io/post/58451c1d8e450a006c0f1c74 支持多种屏幕 Android 可在各种具有不同屏幕尺寸和密度的设备上运行.对于 应用,And ...

  6. XML 架构 (XSD) 参考

    https://msdn.microsoft.com/zh-cn/library/ms256235.aspx XML 架构示例 XML 架构元素 XML 数据类型引用 XML 架构正则表达式 XML ...

  7. AE开发能否实现TOC Control里添加多个Data Frame

    问题: 在ArcMap中,菜单Insert下Data Frame,可以在TOC中增加Data Frame,在MapControl或者PageLayoutControl下都可以正常显示多个Data Fr ...

  8. JS策略模式

    1.策略模式的定义 策略模式又叫算法簇模式,将一组算法分装到一组具体共同接口的独立类或者对象中,它不影响客户端的情况下发生变化. 通常策略模式适用于当一个应用程序需要实现一种特点的服务和功能,而且该程 ...

  9. fatal: could not read Username for 'https://github.com': No such file or directo

    Git push origin master报错 fatal: could not read Username for 'https://github.com': No such file or di ...

  10. javascript设置和获取cookie的通用方法

    //获取cookie  function getCookieValue(cookieName)  {     var cookieValue = document.cookie;     var co ...