• 中间有空格的情况

    是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点
 <style>

    .class1 {

        color: black;

    }

    .class1 .class2 {

        color: red;

    }

    </style>

<body>

<div class="class1">

    I'm class1

    <div class="class2">I'm class2,son of class1</div>

</div>

</body>

结果：

  • 中间无空格情况

    是选择到同时拥有.class1和.class2的节点
 <style>

        .class1 { color: black; }

        .class1 .class2 { color: red; }

        .class1.class2 { color: blue; }

 /*注意优先级，.class1 .class2的优先级比.class1.class2高，.class1 .class2写在.class1.class2后，.class1.class2会被覆盖*/

</style>

<body>

<div class="class1">

    I'm class1

    <div class="class2">I'm class2,son of class1</div>

    <div class="class1 class2">I'm class1class2,son of class1</div>

</div>

</body>

结果：

css定位，class属性之间有空格与无空格的区别的更多相关文章

  1. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  2. CSS定位的属性值

    关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...

  3. CSS选择器：#id和.class中间有空格和无空格的区别

    相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则,但具体怎样不同呢? 首先中间有空格的情况:是选择到.class1类下的.class2类子节点,即 ...

  4. CSS 定位相关属性 ：position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

  5. HTML5学习笔记（八）：CSS定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...

  6. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  7. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  8. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. 深度学习框架如何自动选择最快的算法？Fast Run 让你收获最好的性能！

    作者:王博文 | 旷视 MegEngine 架构师 一.背景 对于深度学习框架来说,网络的训练/推理时间是用户非常看中的.在实际生产条件下,用户设计的 NN 网络是千差万别,即使是同一类数学计算,参数 ...

  2. docker安装maven私服

    目录 一.nexus3安装 二.创建私服仓库 三.发布jar包到私服 四.引用maven私服jar包 五.参考 一.nexus3安装 1.安装镜像 docker pull sonatype/nexus ...

  3. vue 实现 leaflet的测绘，测距，测面

    参考1:https://blog.csdn.net/lonly_maple/article/details/83658608 参考2:https://blog.csdn.net/xtfge0915/a ...

  4. 【springcloud】hystrix面试题

    1 hystrix是什么? Netflix(国外最大的类似于,爱奇艺,优酷)视频网站,五六年前,也是,感觉自己的系统,整个网站,经常出故障,可用性不太高 有时候一些vip会员不能支付,有时候看视频就卡 ...

  5. C# 对SQlServer访问的完整类

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.C ...

  6. 二 MongoDB数据类型和$type操作符

    一.MongoDB中可以使用的类型如下表所示 二.$type操作符 举个例子:想获取指定集合中title为String类型的所有文档

  7. Redis常用技术

    Xml配置: <?xml version='1.0' encoding='UTF-8' ?> <!-- was: <?xml version="1.0" e ...

  8. 算法入门 - 链表的实现及应用（Java版本）

    之前我们学习了动态数组,虽然比原始数组的功能强大了不少,但还不是完全纯动态的(基于静态数组实现的).这回要讲的链表则是正儿八经的动态结构,是一种非常灵活的数据结构. 链表的基本结构 链表由一系列单一的 ...

  9. freeswitch新增模块

    概述 freeswitch的架构由稳定的核心模块和大量的外围插件式模块组成.核心模块保持稳定,外围模块可以动态的加载/卸载,非常灵活方便. 外围模块通过核心提供的 Public API与核心进行通信, ...

  10. 解决移动端click事件300ms延迟的问题

    方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...