实例代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div h1{

            /*div下的h1标签的样式*/

            color:green;

            font-size:30px;

            font-style:italic;

        }

        div p{

            /*div下的p标签的样式*/

            color:silver;

            font-size:20px;

            font_style:italic;

        }

        div p.te1{

            /*div下的p标签中的te1的样式*/

            color:red;

        }

    </style>

</head>

<body>

<div>

    <h1>床前明月光</h1>

    <p>疑是地上霜</p>

    <span>

        举头望明月

        <p>低头思故乡</p>

        <span>

            <p class="te1">李白</p>

        </span>

    </span>

</div>

</body>

</html>

浏览器刷新后的效果如下：

结论：

标签选择器优先级　<　类选择器的优先级

子元素选择器的表现形式:

div > span            表示div元素的子元素

div  span            表示div元素的后代元素

CSS选择器的组合选择器之后代选择器和子元素选择器的更多相关文章

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

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

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

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

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

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

  4. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  5. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

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

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

  7. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  8. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  9. CSS 子元素选择器

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

随机推荐

  1. 开发问题（一）在windows和linux端口占用问题

    前言 今天在MyEclipse中使用tomcat发现tomcat端口8080竟然被占用了,所以就找了一下解决办法共参考! 在网络程序的调试过程中,经常发生一些出乎意料的事情,比如创建一个TCP服务失败 ...

  2. [译]Dapper教程

    脑子里突然浮现出一个想法:尝试翻译一些技术文档.说干就干,先来翻译个最近经常查阅的Dapper教程,有兴趣的园友可以一起参与进来 dapper-tutorial-cn. 什么是Dapper Dappe ...

  3. Codeforces 777C Alyona and Spreadsheet

    C. Alyona and Spreadsheet time limit per test:1 second memory limit per test:256 megabytes input:sta ...

  4. HDU 5144 NPY and shot(物理运动学+三分查找)

    NPY and shot Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  5. [51nod1254]最大子段和 V2

    N个整数组成的序列a[1],a[2],a[3],-,a[n],你可以对数组中的一对元素进行交换,并且交换后求a[1]至a[n]的最大子段和,所能得到的结果是所有交换中最大的.当所给的整数均为负数时和为 ...

  6. 并查集-HDU1232-畅通工程

    转的其他人的.不知道谁的. 来看一个实例,杭电1232畅通工程 首先在地图上给你若干个城镇,这些城镇都可以看作点,然后告诉你哪些对城镇之间是有道路直接相连的.最后要解决的是整幅图的连通性问题.比如随意 ...

  7. linux 操作系统/xxx目录下都是什么文件?

    /bin:存放最常用命令: /dev:设备文件: /etc:存放各种配置文件: /home:用户主目录: /lib:系统最基本的动态链接共享库: /mnt:一般是空的,用来临时挂载别的文件系统: /b ...

  8. angular1项目打包app及logo和启动图片的设置

    打包思想:ionic和angular混合开发app,那么纯angular1的项目也是可以打包出来. 技术需要:安装一个新的ionic2的项目,环境配置成功,这里打包的配置需要 http://www.c ...

  9. YUI 和路径相关的参数与module加载之间的关系

    相关参数默认值 使用YUI, 我们可以配置一些和路径相关参数,如base.root.comboBase.cdn, combine.path.fullpath等属性的配置均会影响到YUI的module加 ...

  10. linux中的两个命令setfacl和chmod有什么区别

    setfacl命令可以用来细分linux下的文件权限.chmod命令可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录设置更精确的文件权限. 比较常用的用法如下:setfacl ...