• 中间有空格的情况

    是选择到.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. 带你梳理Jetty自定义ProxyServlet实现反向代理服务

    摘要:最近要做一个将K8s中的某组件UI通过反向代理映射到自定义规则的链接地址上,提供给用户访问的需求.所以顺便研究了一下Jetty的ProxyServlet. 本文分享自华为云社区<Jetty ...

  2. 上传jar包到nexus

    注释掉: org.springframework.boot.autoconfigure.EnableAutoConfiguration=com.meeno.boot.oa.OaAutoConfigur ...

  3. JS对象创建的几种方法

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.n ...

  4. 我对数据库关系代数中减法sql实现的思考：mysql脚本

    一.创建数据库,创建表结构 CREATE DATABASE Test_sub DEFAULT CHARACTER SET utf8; USE Test_sub; CREATE TABLE studen ...

  5. Servlet常见问题

    时间:2016-12-6 23:18 java.lang.ClassNotFoundException: org.apache.commons.collections.FastHashMapcommo ...

  6. Linux基础——安装以及常用命令

    Linux基础--常用命令 1.安装Vmware 进入VMware官网:  https://www.vmware.com/cn.html下载安装 镜像推荐网址下载:https://www.linux. ...

  7. C# - 习题02_写出程序的输出结果a.Fun()

    时间:2017-08-23 整理:byzqy 题目:写出程序的输出结果: 文件:Program.cs 1 using System; 2 3 namespace Interview1 4 { 5 pu ...

  8. shp平滑处理

    在做图像数据处理时,经常会有栅格数据转矢量数据的操作,转换后的矢量文件会存在锯齿状边缘,不太美观,因此常常需要对矢量(shp)文件做平滑处理. 1 利用arcgis实现shp的平滑和简化 ArcToo ...

  9. 20210809 Merchant,Equation,Rectangle

    做过,但当时咕了 T3 Merchant 先特判 \(t=0\),之后斜率一定会起作用. 考虑最终选择的物品集合,它们的斜率和一定大于 \(0\),因此答案具有单调性,可以二分. 实现的时候注意细节 ...

  10. noip模拟21

    开题发现这场考过,定睛一看,发现是省选前最后一场,没改过呀--但是还是讲武德的赛时没提交 A. Median 神奇之处在于 \(1e7\) 个质数居然能线性筛出来~ 那么 \(S2\) 可以直接筛出来 ...