• 中间有空格的情况

    是选择到.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. STM32—SPI详解

    目录 一.什么是SPI 二.SPI协议 物理层 协议层 1.通讯时序图 2.起始和停止信号 3.数据有效性 4.通讯模式 三.STM32中的SPI 简介 功能框图 1.通讯引脚 2.时钟控制逻辑 3. ...

  2. 当Transactional碰到锁，有个大坑，要小心。

    你好呀,我是why. 前几天在某平台看到一个技术问题,很有意思啊. 涉及到的两个技术点,大家平时开发使用的也比较多,但是属于一个小细节,深挖下去,还是有点意思的. 来,先带你看一下问题是什么,同时给你 ...

  3. Ladp存储规则

    Ladp存储规则 区分名(DN,Distinguished Name) 和自然界中的树不同,文件系统/LDAP/电话号码簿目录的每一片枝叶都至少有一个独一无二的属性,这一属性可以帮助我们来区别这些枝叶 ...

  4. Linux搭建Syslog服务器

    在大多数据的Linux发行版中,rsyslog是一个预先安装的标准日志后台进程.在 客户端/服务端 的系统配置中,rsyslog 能扮演两个角色;作为一个日志服务器能从其它设备收集日志信息,而作为一个 ...

  5. [C#]c#中数据的同步加锁机制 的几种方法

    一,锁定机制最简单的做法就是使用锁定关键字Lock.Lock关键字英文中就是锁的意思,顾名思义就是为操作加上一把锁.它的语法如下: lock(lockObj){//加锁的代码段,一般是操作共同资源的代 ...

  6. C++ template模板编程

    模板是C++泛型编程的基础,一个模板就是一个创建类或者函数的蓝图或者公式.当使用一个vector这样的泛型类型,我们提供足够的信息,就可以将蓝图转换成特定的类或者函数. 假设我们编写一个函数来比较两个 ...

  7. 【springcloud】Eureka 常用配置解析

    转自:https://www.cnblogs.com/zyon/p/11023750.html 1. 配置项解析 1.1 通用配置 # 应用名称,将会显示在Eureka界面的应用名称列 spring. ...

  8. springboot @value无法赋值

    1解决方式在类上在加@Compent @Component@EnableBinding(Sink.class)public class ReceiveMessageListenerController ...

  9. ES6扩展——箭头函数

    1.箭头函数 在es6中,单一参数的单行箭头函数语法结构可以总结如下: const 函数名 = 传入的参数 => 函数返回的内容,因此针对于 const pop = arr => arr. ...

  10. WebStorm 2018.3.2 激活方式（永久）

    其他版本下载:https://www.jetbrains.com/webstorm/download/other.html 这个适合2018.3.2 第一步:下载补丁包(jar)链接:https:// ...