13-子元素选择器

p{
color: red;
}
*/
/*
#identity>p{
color: blue;
}
*/
div>ul>li>p{
color: purple;
}

-->
标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
-->

我是段落

我是段落

我是段落

  • 我是段落

我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>13-子元素选择器</title>

    <style>

        /*

        div>p{

            color: red;

        }

        */

        /*

        #identity>p{

            color: blue;

        }

        */

        div>ul>li>p{

            color: purple;

        }

    </style>

</head>

<body>

<!--

1.什么是子元素选择器?

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:

标签名称1>标签名称2{

    属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

2.子元素选择器之间需要用>符号连接, 并且不能有空格

3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

4.子元素选择器可以通过>符号一直延续下去

-->

<!--div>ul>li>p-->

<p>我是段落</p>

<div id="identity">

    <p>我是段落</p>

    <p>我是段落</p>

    <ul>

        <li><p>我是段落</p></li>

    </ul>

</div>

<p>我是段落</p>

</body>

</html>

H5 13-子元素选择器的更多相关文章

  1. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  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. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

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

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

  10. CSS 子元素选择器

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

随机推荐

  1. 当年写的如何成为一名MSSQL DBA

    很多开发人员都想成为一名数据库培训,也有很多人一开始就把自己定位成为一名DBA,DBA究竟需要掌握些什么知识和技能呢?以下是我        做DBA工作和面试DBA时,整理的一些DBA方面的三十个问 ...

  2. mac os 10.12 Sierra 连接 惠普 M1136 MFP 打印机，通过 samba 协议，安装驱动，连接打印机

    参考链接: https://support.hp.com/hk-zh/product/hp-zbook-17-g3-mobile-workstation/8693765/document/c04530 ...

  3. Zookeeper源码编译为Eclipse工程（win7下Ant编译）

    前言 ZooKeeper是雅虎的.用Ant进行软件构建. 千里之行,始于足下.想看源码的第一步,是下载源码并导入某个IDE工具. Ant http://ant.apache.org/ Windows: ...

  4. 【HNOI2018】毒瘤

    [HNOI2018]毒瘤 设\(f_{v,0}\)表示\(v\)的子树中\(v\)不选的方案数,\(f_{v,1}\)表示\(v\)选的方案数. 显然 \[ f_{v,0}=\prod (f_{sn, ...

  5. Celery 异步任务

    Celery https://www.cnblogs.com/DragonFire/p/10356615.html 介绍: Celery 是芹菜 Celery 是基于Python实现的模块, 用于执行 ...

  6. Django-rest-framework 接口实现 ModelSerializer 使用

    ModelSerializer 使用 不需要单独写字段的 序列化工具类 相当于 ModelForm 写法:以及 注意事项: 继承 serializers.ModelSerializer 在类中填写 c ...

  7. php面试题整理（二）

    索引,desc 和explain unset只是删除了变量名

  8. FinalShell安装

    Mac版安装路径/Applications/finalshelldata Linux版安装路径/usr/lib/finalshelldata 注意:1.FinalShell运行需要java或者jdk支 ...

  9. 牛客网训练1--------矩阵 （二份+二维矩阵hash）

    不懂hash的话:https://www.cnblogs.com/ALINGMAOMAO/p/10345850.html 思路:对于一个大矩阵的每一个子矩阵都对应着一个hash值k, 当k出现2次以上 ...

  10. jupyter notebook中No module named 'tensorflow'

    当我们在jupyter notebook中运行时可能会遇见没有某个包的情况,如下: ---------------------------------------------------------- ...