CSS后代选择器“空格”和“>”的使用辨析
要点:
举个栗子:
html代码如下
<body>
<div class="parent">
<p>1p</p>
<div>2div
<p>-2.1p</p>
<p>-2.2p</p>
<a>-2.3a</a>
</div>
<p>3p</p>
<p>4p</p>
</div>
</body>
css代码(带空格的后代选择):
.parent p {
background: red;
}
结果:子代1p 3p 4p 及孙代 2.1p,2.2p都选上了

css代码(带“>”的后代选择):
.parent > p {
background: red;
}
结果:只有子代1p 3p 4p 选上

CSS后代选择器“空格”和“>”的使用辨析的更多相关文章
- css后代选择器(div.class中间不带空格)
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 小tip: CSS后代选择器可能的错误认识——张鑫旭
一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- css后代选择器
后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...
- CSS后代选择器可能的错误认识
一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red&q ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
随机推荐
- Chapter 2 User Authentication, Authorization, and Security(5):使用固定服务器角色
原文出处:http://blog.csdn.net/dba_huangzj/article/details/38844999,专题目录:http://blog.csdn.net/dba_huangzj ...
- 11.4、Libgdx的音频之录制PCM音效
(官网:www.libgdx.cn) 可以通过AudioRecorder接口访问PCM数据.通过如下方式创建一个接口实例: AudioRecorder recorder = Gdx.audio.new ...
- C语言符号优先级
优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 () 圆括号 (表达式)/函数名(形参表) . 成员选择(对象) 对象.成员名 -& ...
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(十四)
我们首先必须将Level中所有机器人保存在某个数组里,因为该数组会在不同地方被访问,我们将其放在LevelRestrict类中,按道理应该放到GameState类中,这里从简. 打开LevelRest ...
- iOS屏幕适配-iOS笔记
学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...
- OpenCV特征点检测------Surf(特征点篇)
Surf(Speed Up Robust Feature) Surf算法的原理 ...
- [前端]Emmet 基本语法快查
Emmet 是一种快速写html的语法,通过几个简单的缩写,就可以拓展成html标签,工作中写html多多少少会有一些,使用的语法都是基础语法,这里总结下最常用的几个,备查. 这个插件支持非常多的ID ...
- 鹅场offer已Get,下周签约,终于能静下心来总结总结
2015年9月20号下午,接到腾讯总部的电话,确定了offer相关信息,算是正式get了鹅场的offer,坐等下个周一周二的签约会. 心路篇 2015年2月:已经2月份了,自己在大学的时光已经来到了比 ...
- gtk+程序在关闭主窗口时的事件流
当鼠标单击gtk+窗口的关闭按钮时,程序首先接收到delete_event,当该事件处理函数返回TRUE表示事件已处理禁止进一步传播,从而取消关闭操作:当返回FALSE时,事件消息进一步向上传播,此时 ...
- Hbase replication操作
1.修改hbase-site.xml文件 <property> <name>hbase.replication</name> <value>true ...