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. [20190214]11g Query Result Cache RC Latches.txt

    [20190214]11g Query Result Cache RC Latches.txt --//昨天我重复链接http://www.pythian.com/blog/oracle-11g-qu ...

  2. Linux下安装JDK，Tomcat，Mysql详细教程

    1. 概述 今天教大家在linux下安装jdk,mysql以及tomcat.在javaweb开发中,最后完成的项目代码,一般都是布在linux服务器下的.因为linux服务器可以说是安全性稳定性都比w ...

  3. List删除

    使用for循环,倒序删除: ; i >= ; i--) { var item = list[i]; ") { list.Remove(item); } }

  4. c/c++ 标准库 string

    c/c++ 标准库 string 标准库 string的小例子 test1~test10 #include <iostream> using namespace std; int main ...

  5. Windows10反安装报错error code 2502 2503

    先找系统TEMP目录,一般为C:\windows\temp,打开这个目录的权限,为这个目录中的User用户添加权限为完全控制,现在再反安装就不会报错了. 注:原因就是因为系统运行时需要用到临时文件的目 ...

  6. Nginx使用教程(七)：使用Nginx缓存之proxy cache

    定义缓存目录 <br\>使用您喜欢的文本编辑器打开/etc/nginx/nginx.conf,并在http {区域加入: proxy_cache_path  /var/www/cache ...

  7. animate()写无限循环

    var css = {left:'500px'}; $('.arrow').animate(css,300,rowBack); function rowBack(){ if(css.left==='5 ...

  8. MySQL高级知识（七）——索引面试题分析

    前言:该篇随笔通过一些案例,对索引相关的面试题进行分析. 0.准备 #1.创建test表(测试表). drop table if exists test; create table test( id ...

  9. Ubuntu16.04 下 hadoop的安装与配置（伪分布式环境）

    一.准备 1.1创建hadoop用户 $ sudo useradd -m hadoop -s /bin/bash #创建hadoop用户,并使用/bin/bash作为shell $ sudo pass ...

  10. js 文件引用传递参数

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code (function() {var hm = document.createElement(&q ...