• 中间有空格的情况

    是选择到.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. 《手把手教你》系列技巧篇（二十一）-java+ selenium自动化测试-浏览器窗口的句柄（详细教程）

    1.简介 今天本来就要分享和讲解三大延时等待的,但是在写作过程中发了问题,会用到这一个知识点,于是就提前介绍一下,以便后边用到了可以更好的理解和掌握.本文就是要介绍如何获得浏览器窗体的句柄或者叫编号, ...

  2. 【硬件模块】UWB介绍

    From: https://liudongdong1.github.io/ UWB超宽带定位技术属于无线定位技术的一种.无线定位技术是指用来判定移动用户位置的测量方法和计算方法,即定位算法.目前最常用 ...

  3. 小程序使用微信地址or小程序跳转设置页

    如果你有使用过小程序需要你授权微信地址的情况,那么正常的逻辑应该是这样的: 点击获取地址后,弹窗: 此时我相信选择拒绝的人应该还是比较多的,毕竟这是敏感数据,拒绝后再看页面相关功能是否有使用地址的合适 ...

  4. C# 线程同步的多种方式

    实际应用中多个线程往往需要共享数据,因此必须使用同步技术,确保一次只有一个线程访问和改变共享数据.同步又分为进程内部线程的同步以及进程之间线程的同步. 进程内部线程同步: 1. lock : 使用比较 ...

  5. js判断checkbox是否选中 .checked不管用

    今天开发遇到一个小问题,记小本本记小本本 document.getElementById("id").checked //正确 //如果返回值为true代表选中 //如果返回值为f ...

  6. docker 安装Hive

    转自:https://www.cnblogs.com/upupfeng/p/13452385.html#%E9%83%A8%E7%BD%B2hive 使用docker快速搭建hive环境   记录一下 ...

  7. 学习Java的9张思维导图

    转自:https://blog.csdn.net/aitaozi11/article/details/79652943 网上搜集了java的学习思维导图,分享给大家. 01.Java程序设计(基础) ...

  8. Zookeeper 序列化机制

    一.到底在哪些地方需要使用序列化技术呢? 二.Zookeeper(分布式协调服务组件+存储系统) Java 序列化机制 Hadoop序列化机制 Zookeeper序列化机制 一.到底在哪些地方需要使用 ...

  9. promise加载图片

    实现一个图片的加载:设置第一张图片加载1s之后加载第二张图片: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  10. Learning ROS: Running ROS across multiple machines

    Start the master ssh hal roscore Start the listener ssh hal export ROS_MASTER_URI=http://hal:11311 r ...