实例代码：

<!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. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  2. 学习笔记-nodejs报错

    端口被占用 解决办法:打开控制管理器关掉node.exe进程 如果找不到可以使用命令行:netstat -ano | findstr 8000 找到进程的pid,然后到控制管理器找到进程杀掉. net ...

  3. UOJ#152. 【UR #10】汉诺塔

    题目:http://uoj.ac/problem/152 orzKPM... 分治,把数字是l~mid的拿出来放在一根柱子上,mid+1~r放在另一根柱子上.如此递归下去,每次递归只是改一下方向,l, ...

  4. hdu_2668 Daydream O(n)求最长不重复子串

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2668 Daydream Time Limit: 2000/1000 MS (Java/Others)  ...

  5. 《SpringMVC从入门到放肆》四、SpringMVC配置式开发（处理器映射器）

    上一篇我们讲解了DispatcherServlet的url-pattern配置详解,今天我们来真正对SpringMVC进行配置式开发.所谓配置式开发是指“处理器类是程序员自己定义的.实现了特定接口的类 ...

  6. Spring框架学习笔记（2）——IOC&DI

    IOC:控制反转,创建对象的权利交给Spring,Spring会自动创建对象. DI:依赖注入,操作的对象靠Spring注入,如果不使用Spring,对象的属性值是要靠setter方法来添加的,使用S ...

  7. 用 Deployment 运行应用 - 每天5分钟玩转 Docker 容器技术（123）

    从本章开始,我们将通过实践深入学习 Kubernetes 的各种特性.作为容器编排引擎,最重要也是最基本的功能当然是运行容器化应用,这就是本章的内容. Deployment 前面我们已经了解到,Kub ...

  8. C++输出二进制文件和文本文件

    所谓二进制文件和文本文件对于字母而言没有什么不同,都是存储该字母的ASCII码值.能引起不同的是数字和一些排版用符号的格式. 数字在二进制文件中会存储该数字的值,而文本文件中则首先将该数字视为字符量, ...

  9. 如何使用cmd打开磁盘目录和文件

    在windows操作系统中拥有命令行工具(cmd).cmd具有强大的功能,这里我就和大家介绍一下怎么使用cmd命令打开文件. 工具/原料 cmd命令行 打开cmd 1 在windows操作系统中按住w ...

  10. 如何用SVN版本控制器将提交的文件还原到以前的版本

    工具/原料 SVN乌龟软件和相关的文件 方法/步骤 在相关的文件中右击鼠标,按右图进行选择 在弹出框的地方点击我标记的地方,查看下曾经提交过的版本文件 在弹出框的地方,上面就是有版本号,下面就是我们文 ...