要点：

　　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. cocos2d-js（二）cocos2d-js的基本语法与类的简介

    基本语法: 1.类的定义 一般类都是集成Scene或者Layer: var myLayer = cc.Layer.extend({类的内容}); 2类内的成员变量与方法: 2.1成员变量的声明: 变量 ...

  2. Dom4j修改xml文档引入

    前面介绍了如何解析xnl文档的内容,这里对修改xml展开讨论. 一.首先看一下,写出内容到xml文档的主要代码: XMLWriter writer = new XMLWriter(OutputStre ...

  3. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  4. 开源图像检索工具：Caliph&Emir使用方法

    Caliph&Emir是基于MPEG7的软件.它是用Java编写的开源软件.采用了lucene完成索引和检索功能.是研究MPEG7标准,图像检索等等方面不可多得的好工具. 在此介绍一下它们的基 ...

  5. STL(标准模板库)理论基础，容器，迭代器，算法

    基本概念 STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称.现然主要出现在C++中,但在被引入C++之前该技术就已经存在了很长的一段时间.   ...

  6. 类模板语法知识体系梳理（包含大量常犯错误demo，尤其滥用友元函数的错误）

    demo 1 #include <iostream> #include <cstdio> using namespace std; //template <typenam ...

  7. OpenCV 实现颜色直方图

    颜色直方图是在许多图像检索系统中被广泛采用的颜色特征.它所描述的是不同色彩在整幅图像中所占的比例,而并不关心每种色彩所处的空间位置,即无法描述图像中的对象或物体.颜色直方图特别适于描述那些难以进行自动 ...

  8. CentOS 6.X启动流程

    CentOS 6.X启动流程 /boot分区 启动引导程序是默认可以识别boot分区的.因此在系统还无法加载硬盘的时候,boot分区是可以识别的! initramfs内存文件系统 CentOS 6.x ...

  9. android Google推荐的容器SparseArrayCompat简介

    android Google推荐的容器SparseArrayCompat简介 private static SparseArrayCompat<BaseFragment> mCaches ...

  10. Android官方技术文档翻译——开发工具的构建概述

    本文译自Android官方技术文档<Build Overview>,原文地址:http://tools.android.com/build. 因为<Android Lint Chec ...