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. jenkins 备份配置信息

    本文介绍几种备份jenkin配置信息的方法,大家可根据实际情况做出选择. 我的测试环境如下: windows 7 jenkins 2.32.3 ____升级到___2.46.3 (长期支持版本) 多种 ...

  2. python根据关键字以及id值爬取图虫网上高质量大图

    import requests import re import os import time print("ready....") def downPic(dirs, keywo ...

  3. 4.8Python数据处理篇之Matplotlib系列(八)---Figure的学习

    目录 目录 前言 (一)figure()方法的定义 (二)figure()方法的参数 (三)figure()方法的例子 1.多窗体绘图: 2.窗口得分别率 目录 前言 今天我们来学习一下plt.fig ...

  4. LeetCode算法题-Missing Number（Java实现-四种解法）

    这是悦乐书的第200次更新,第209篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第65题(顺位题号是268).给定一个包含n个不同数字的数组,取自0,1,2,...,n ...

  5. LeetCode算法题-Factorial Trailing Zeroes（Java实现）

    这是悦乐书的第183次更新,第185篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第42题(顺位题号是172).给定一个整数n,返回n!中的尾随零数.例如: 输入:3 输 ...

  6. May 23. 2018 Week 21st Wednesday

    You should love and take care of yourself because after all, it is your own life. 要学会爱自己,照顾自己,毕竟生活是你 ...

  7. layui 的 GitHub 及 Gitee (码云) 仓库

    GitHub: https://github.com/sentsin/layui/ Gitee:https://gitee.com/sentsin/layui

  8. keepalived脑裂问题查找

    在自己环境做keepalived+redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...

  9. Linux之定时任务crond

    定时任务说明与分类 定时任务的应用场景举例 每天晚上 12点备份/etc/目录 tar 定时任务的三种分类 crond(crontab)定时任务软件(软件包cronie),用的最多的一种 atd,应用 ...

  10. TortoiseHg 学习笔记

    0.前言     TortoiseHg是分布式的源代码管理工具Mercurial的GUIclient. mercurial 作为3大主流的分布式源代码管理工具.已经被广泛的使用.比如 googleco ...