要点:

  1. “空格”:包含子孙

  2. “>”:含子不含孙

举个栗子:

  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后代选择器“空格”和“>”的使用辨析的更多相关文章

  1. css后代选择器(div.class中间不带空格)

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  2. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  3. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  4. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  5. 小tip: CSS后代选择器可能的错误认识——张鑫旭

    一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...

  6. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. css后代选择器

    后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...

  8. CSS后代选择器可能的错误认识

    一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red&q ...

  9. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

随机推荐

  1. msm8974 camera driver添加新摄像头kernel hal修改

    添加一款新摄像头流程 1添加sensor kernel driver, 主要实现上电.rst.pwd.mclk等power setting,sensor prob & sensor  i2c ...

  2. Java 8新特性探究(五)Base64详解

    BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且很容易破解,他核心作用应该是传输数据的正确性,有些网关或系统只能使 ...

  3. ROS(indigo)机器人操作系统学习有趣丰富的Gazebo仿真示例evarobot

    一直在寻找一个示例可以将ROS学习中常用的基础内容大部分都包含进去,最好还包括Gazebo仿真, 这样即使没有硬件设备,也可以很好的学习ROS相关内容,但又必须有对应的硬件,便于后续研究. 这里,介绍 ...

  4. (NO.00003)iOS游戏简单的机器人投射游戏成形记(二)

    打开Ai按需求依次绘制机器人身体,手臂和篮框: 因为是实验性质的游戏所以没必要在这上面花太多功夫,画出意思即可.虽然是2D游戏,但实际游戏中可以表现出伪3D的图形效果;尽管本猫这次画的游戏元素都是满满 ...

  5. Gradle 1.12用户指南翻译——第二十一章. Gradle 插件

    昨天晚上只顾着和女朋友看<匆匆那年>电视剧的最后几集,所以说好的Android文档<Gradle 插件用户指南>第五章自然也没翻译多少.所以今天也发不了第五章的翻译了,就发几个 ...

  6. 017-封装-OC笔记

    学习目标 1.[了解]异常处理 2.[掌握]类方法 3.[掌握]NSString类 4.[掌握]匿名对象 5.[掌握]封装实例变量 6.[掌握]对象之间的关系 一.异常处理 什么是异常? 代码完全符合 ...

  7. Leetcode_75_Sort Colors

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43302343 Given an array with n  ...

  8. ubuntu14.04系统中virtualbox安装Oracle VM VirtualBox Extension Pack包

    ubuntu14.04系统中virtualbox默认不支持usb设备,需要安装Oracle VM VirtualBox Extension Pack才行,但必须安装以下版本才可以安装成功: Oracl ...

  9. 《java入门第一季》之面向对象(匿名对象)

    /* 匿名对象:就是没有名字的对象. 匿名对象的应用场景: A:调用方法,仅仅只调用一次的时候. 注意:调用多次的时候,不适合. 匿名对象调用完毕就是垃圾.可以被垃圾回收器回收,释放了系统资源. B: ...

  10. Effective C++总结

    条款01:视C++为一个语言联邦(View C++ as a federation of languages.) C++主要的四个次语言: (1)C.说到底C++仍是以C为基础:(2)Object-O ...