12-后代选择器


我是段落

我是段落

我是段落

  • 我是段落

  • 我是段落

我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>12-后代选择器</title>

    <style>

        /*

        div p{

            color: red;

        }

        */

        /*

        #identity p{

            color: red;

        }

        */

        /*

        .para p{

            color: blue;

        }

        */

        /*

        #identity #iii{

            color: skyblue;

        }

        */

        /*

        #identity .ccc{

            color: purple;

        }

        */

        div ul li p{

            color: red;

        }

    </style>

</head>

<body>

<!--

1.什么是后代选择器?

作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:

标签名称1 标签名称2{

    属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

div p{}

注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4.后代选择器可以通过空格一直延续下去

-->

<!--div ul li p-->

<p>我是段落</p>

<div id="identity" class="para">

    <p>我是段落</p>

    <p>我是段落</p>

    <ul>

        <li>

            <!--<p id="iii" class="ccc">我是段落</p>-->

            <p>我是段落</p>

        </li>

        <li>

            <p>我是段落</p>

        </li>

    </ul>

</div>

<p>我是段落</p>

</body>

</html>

H5 后代选择器的更多相关文章

  1. 子代选择器（>）后代选择器（' '）的区别

    子代选择器是指紧接着父级的那个标签,如:container>a指的是紧接着container后面的第一个a(儿子级别的,孙子或者之后的a是不能生效的) 后代选择器是用空格分开的,如:contai ...

  2. CSS后代选择器可能的错误认识

    一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red&q ...

  3. CSS 后代选择器

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

  4. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  5. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  6. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  7. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

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

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

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

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

随机推荐

  1. java.lang.IllegalStateException: Cannot forward after response has been committed的一个情况解决方法

    java.lang.IllegalStateException: Cannot forward after response has been committed xxx.xxx.doPost(upd ...

  2. mssql sqlserver 使用sql脚本获取群组后，按时间排序(asc)第一条数据的方法分享

    摘要: 下文讲述使用sql脚本,获取群组后记录的第一条数据业务场景说明: 学校教务处要求统计: 每次作业,最早提交的学生名单下文通过举例的方式,记录此次脚本编写方法,方便以后备查,如下所示: 实现思路 ...

  3. 登录views

    import osimport hashlibfrom django.shortcuts import render,render_to_response,redirect,HttpResponseR ...

  4. Git&GitHub

    Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.  Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软 ...

  5. php学习----什么是常量

    PHP-什么是常量 1.什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量(后续小节会详细介绍). 2. ...

  6. 【项目 · Wonderland】会议一 · 可达鸭

    [软件工程实践 · 团队项目] 第一次作业 Part 0 · 简 要 目 录 Part 1 · 队 伍 阵 容 Part 2 · 会 议 记 录 相 关 Part 3 · 会 议 讨 论 记 录 Pa ...

  7. 推酷文章中编写js组件系列文章整理

    一步一步实现JS拖拽插件 http://www.tuicool.com/articles/RBbmMjY JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享 http://ww ...

  8. 《Java大学教程》--第2章 选择

    迭代(iteration).重复(repetition):三种循环* for: 重复执行固定次数* while: 重复执行不固定次数* do...while: 比while至少多一次 1.答:P47迭 ...

  9. 基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  10. php面试题整理（五）

    表单也得改