css定位,class属性之间有空格与无空格的区别
- 中间有空格的情况
是选择到.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属性之间有空格与无空格的区别的更多相关文章
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- CSS定位的属性值
关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...
- CSS选择器:#id和.class中间有空格和无空格的区别
相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则,但具体怎样不同呢? 首先中间有空格的情况:是选择到.class1类下的.class2类子节点,即 ...
- CSS 定位相关属性 :position
我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...
- HTML5学习笔记(八):CSS定位
CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- CSS定位属性position相关介绍
position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- SQL 练习4
查询不存在" 01 "课程但存在" 02 "课程的情况 SELECT * from sc WHERE cid = '02' AND sid not in (SE ...
- Java之Spring基础与IoC
Spring About Spring 开源免费框架,轻量级,非入侵式框架.Spring就是一个轻量级的控制反转(IOC)和面向切片编程(AOP)的框架 Maven repo:Spring Web M ...
- SpringCloud升级之路2020.0.x版-21.Spring Cloud LoadBalancer简介
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们使用 Spri ...
- 微软官方安装介质Windows10系统安装教程
微软官方安装介质Windows10系统安装教程 Jasper游戏 发布时间:04-2204:23 小贴士:事前准备 ★ 拥有 Internet 连接 ★ 在计算机.USB 或外部驱动器上拥有足够的可用 ...
- QT怎样插入图片
工具/原料 QT designer 方法/步骤 1 首先创建一个Manwindow窗口 拖一个label到窗口上 把文字去掉,然后把label放大 找到stylesheet一栏 ...
- 多台服务器共享session问题(2)
多台服务器共享session问题 转载自:https://www.cnblogs.com/lingshao/p/5580287.html 在现在的大型网站中,如何实现多台服务器中的session数据 ...
- 交互式查询⼯具Impala
Impala是什么: Impala是Cloudera提供的⼀款开源的针对HDFS和HBASE中的PB级别数据进⾏交互式实时查询(Impala 速度快),Impala是参照⾕歌的新三篇论⽂当中的Drem ...
- centos7 shell 计算器 bc 命令
2021-08-03 1. 安装 yum -y install bc 2. 简介 bc 命令是任意精度计算器语言,通常在 linux 下当计算器使用 类似基本的计算器, 使用这个计算器可以做基本的数学 ...
- Session原理、生命周期及购物车功能的实现
在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据(保存该浏览器(会话)的相关信息)时 ...