要点：

　　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. Uva - 816 - Abbott's Revenge

    这个迷宫问题还是挺好玩的,多加了一个转向的问题,有些路口不同的进入方式会有不同的转向限制,这个会比较麻烦一点,所以定义结点结构体的时候需要加一个朝向dir.总体来说是一道BFS求最短路的问题.最后打印 ...

  2. 【一天一道LeetCode】#99. Recover Binary Search Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Two ele ...

  3. ISLR系列：(2)分类 Logistic Regression & LDA & QDA & KNN

       Classification 此博文是 An Introduction to Statistical Learning with Applications in R 的系列读书笔记,作为本人的一 ...

  4. 关于React Native 报Export declarations are not supported by current JavaScript version错误的解决问题

    设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个 ...

  5. （二十一）即时通信的聊天气泡的实现II

    一些优化: 禁止TableView的点击: self.tableView.allowsSelection = NO; 合并相同的时间: 不需要显示的时间,只要不设置尺寸就行了. 一个if判断的技巧,为 ...

  6. com.android.ddmlib.SyncException: Read-only file system

    通过eclipse运行Android 程序到测试机时候 控制台出现如下错误: [2014-02-13 15:06:03 - MPlay] Failed to install MPlay.apk on ...

  7. iOS真机调试步骤（Xcode8.0以上版本）（2015年）

    方法/步骤(转载:http://jingyan.baidu.com/article/22fe7ced20cc073002617f97.html) 获取真机调试的证书,先在本地生成获取证书的文件,找不到 ...

  8. ARM linux常用汇编语法

    汇编语言每行的语法:     lable: instruction  ; comment 段操作: .section           格式: .section 段名 [标志］     ［标志］可以 ...

  9. Linux文件与目录的默认权限与隐藏权限 - umask, chattr, lsattr, SUID, SGID, SBIT, file

    文件默认权限:umask [root@www ~]# umask 0022 <==与一般权限有关的是后面三个数字! [root@www ~]# umask -S u=rwx,g=rx,o=rx ...

  10. Linux内核中断和异常分析(下)

    这节,我们继续上,中(以前的日志有)篇目进行分析,结合一个真实的驱动案例来描述linux内核中驱动的中断机制,首先我们先了解一下linux内核中提供的中断接口. 这个接口我们需要包含一个头文件:#in ...