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

首先我们来了解一下子元素选择器与后代选择器的基本语法

语法

子元素选择器的语法如下：

div>ul{color：red；}

子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素



后代选择器的语法如下：

h1 em{color:red;}

后代选择器可以选择作为某元素后代的元素,父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

二者区别：

我们通过一个实例来讲解子选择器与后代选择器的区别

先来看一下后代选择器div p的效果

<!DOCTYPE html>

<html>

<head>

<title>http://www.manongjc.com</title>

<style>

div p{

    background-color:yellow;

}

</style>

</head>

<body>

<div>

    <p>子元素选择器</p>

    <span><p>后代选择器</p></span>

</div>

</body>

</html>

运行结果如图：

css 子选择器

再来看一下子选择器div p的效果

<!DOCTYPE html>

<html>

<title>http://www.manongjc.com/article/1075.html</title>

<head>

<style>

div>p{

    background-color:yellow;

}

</style>

</head>

<body>

<div>

    <p>子元素选择器</p>

    <span><p>后代选择器</p></span>

</div>

</body>

</html>

运行结果如图：



从上面实例可以看出子选择器只作用于其第一代元素，而后代选择器作用于N（N为自然数）代元素。

原文地址：http://www.manongjc.com/article/1075.html

其他阅读：

  • css :hover伪类选择器实例分析
  • CSS :focus 伪类选择器使用详解
  • css required valid和invalid选择器详解
  • css :lang选择器使用详解
  • css :in-range伪类选择器使用实例分析

    • CSS 子元素选择器与后代选择器区别实例讲解的更多相关文章

    1. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）

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

    2. HTML&CSS基础-子元素的伪类选择器

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

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

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

    4. CSS子元素设置margin-top作用于父容器？

      CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

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

      来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...

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

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

    7. CSS 子元素选择器

      所有选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp 1)子元素选择器 参考链接:http://www.w3school.com. ...

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

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

    9. 前端学习 --Css -- 子元素的伪类

      :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

    随机推荐

    1. Android 使用Telephony API

      Android 使用Telephony API public class TelephonyDemo extends Activity { TextView textOut; TelephonyMan ...

    2. [原]Linux系统管理使用技巧总结

      一.磁盘管理 1.查看磁盘空间大小 df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du可以查看文件及文件夹的大小.如果不带其他参数(-h表示human-readabl ...

    3. Neutron分析（1）——简介

      Neutron是OpenStack核心项目之一,提供云计算环境下的虚拟网络功能.Neutron的功能日益强大,并在Horizon面板中已经 集成该模块.作为Neutron的核心开发者之一,个人觉得Ne ...

    4. POJ #1015 - Jury Compromise - TODO: POJ website issue

      (poj.org issue. Not submitted yet) This is a 2D DP problem, very classic too. Since I'm just learnin ...

    5. 激活Maven profile的几种方式

      首先简单介绍下 Maven 的 profile 是什么.对于人来说,profile 是指人的肖像,轮廓,比如论坛里每个人注册了帐号后,可以设置自己的 profile,放上照片,介绍等等.对于 Mave ...

    6. FastReport使用总结三——条码简介

      FastReport Desinger中支持的Barcode类型如下图所示: 设置其Barcode属性可以实现支持不同的条码类型. 注意: 支持的条码类型说明如下: 总结: 1.通过设置Barcode ...

    7. objective-c 下面int 和 NSData数据 互相转换的方法

      抄自这里 ; NSData *data = [NSData dataWithBytes: &i length: sizeof(i)]; int i; [data getBytes: & ...

    8. [tty与uart]stty命令使用

      中文解释链接:http://linux.51yip.com/search/stty 英文解释链接:http://pubs.opengroup.org/onlinepubs/9699919799/uti ...

    9. [系统开发] Postfix 邮件管理系统

      一.简介 开发时间:2012年 开发工具:Perl CGI 这是我开发的 Postfix 邮件管理系统,通过它可以安全.方便的对邮件域名.用户.权限.组.邮箱容量.安全等进行各种设置:界面样式借鉴了 ...

    10. item3 二维数组中的查找[剑指offer]

      题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有这个整数? 8 9 思路:查找7 ...