来源于:http://www.jianshu.com/p/599654ba5f4a

子选择器:

一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素(第一子代)li(水果、蔬菜)加入红色实线边框。

包含(后代)选择器:

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first  span{color:red;}

这行代码会使class名为first下的(所有后代)span标签内的字体颜色变为红色。

区别:

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代

CSS的子选择器与后代选择器的区别的更多相关文章

  1. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  2. HTML&CSS基础-子元素和后代元素选择器

    HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...

  3. CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  4. CSS子选择器与后代选择器的区别

    p > span{ color:blue; } <p> 嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙 ...

  5. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. css 串联选择器和后代选择器

    串联选择器:作用在同一个标签上 <div class=”a” id ="qq"><span>look at the color</span>&l ...

  7. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  8. CSS 后代选择器

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

  9. css——子代与后代选择器

    一直都以为,子代选择器与后代选择器作用是一样的,都是选择一个元素下面的子元素,直到今天才明白: 1.子代选择器(用<连接):ul>li 子选择器仅仅选择ul包围的 子元素 中的 li元素, ...

随机推荐

  1. Rotate Image leetcode java

    题目: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwis ...

  2. JavaScript类的写法

    js类的基本含义 我们知道,在js中,是没有类的概念的.类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心. 类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是 ...

  3. 提高sql2005中带freetexttable和rank的全文检索的速度

    原来使用中的sql2005的全文检索的速度总是不如意,尤其是带rank的.今天搜了一下,原来在freetexttable中还有一个参数top_n_by_rank,是第4个参数.注意还要设置:EXEC ...

  4. 对Kalman(卡尔曼)滤波器的理解@@zz

    1.简介(Brief Introduction) 在学习卡尔曼滤波器之前,首先看看为什么叫“卡尔曼”.跟其他著名的理论(例如傅立叶变换,泰勒级数等等)一样,卡尔曼也是一个人的名字,而跟他们不同的是,他 ...

  5. fasttext使用笔记

    http://blog.csdn.net/m0_37306360/article/details/72832606 这里记录使用fastText训练word vector笔记 github地址:htt ...

  6. Thinkphp5 使用odbc连接到sqlserver

    在PHP中访问mssql有两个方式 1.安装相应的驱动,如sqlsrv 2.直接使用PHP自带的ODBC驱动(不需要安装)   本文直接使用自带的ODBC驱动 在使用前请确定PHP开启了php_pdo ...

  7. Linux扩展文件分区

    **************操作之前请看章节6,看系统是否支持LVM分区管理方式*************** 1:新增磁盘 插入新的磁盘,比如物理机可以直接在卡槽插入,虚拟机可以在控制台添加磁盘或者 ...

  8. (文档)Shader.Find (在编译时,只包含那些使用中的shader或位置在"Resources"文件夹中shader)

    Shader.Find 查找 static function Find (name : string) : Shader Description描述 Finds a shader with the g ...

  9. [Git] Move some commits to a separate branch that I have accidentally committed to master

    Gosh no, I just added all of these commits to master. They were thought to be peer reviewed first in ...

  10. 解决webstorm本地IP访问页面出错的问题,webstorm支持IP访问

    想在手机端访问webstorm做出的页面,遇到了根据IP地址访问页面错误的问题,试了网上的方法:“设置webstorm可以被外部连接访问”,依旧不能解决 解决方法: 在webstorm下:ctrl+a ...