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. [20181229]关于字符串的分配问题.txt

    [20181229]关于字符串的分配问题.txt --//链接:http://www.itpub.net/thread-2107534-1-1.html提到的问题,里面一段英文读起来很绕口:--//百 ...

  2. mssql sqlserver 从指定字符串中获取数字的方法

    转自:http://www.maomao365.com/?p=6410 摘要: 下文主要分享从指定字符串或列中获取数字信息,如下所示: 实验环境:sql server 2000 ----编写sql函数 ...

  3. spring mvc 中 controller 路径配置

    下图中,由于红色部分(value="/")的存在,导致 host:port/项目/dimlist 无法被映射到dimList方法,解决办法是将其去掉. package cn.bgo ...

  4. python len()函数的用法

    函数:len() 返回字符串.列表.字典.元组等长度. 语法:len(str) str:要计算的字符串.列表.字典.元组等 返回值:字符串.列表.字典.元组等元素的长度. Test: 1:计算字符串的 ...

  5. 3d max 动作Take 001改名

    问题描述 带动作的Fbx文件导入Unity之后,动作名字为Take 001,如下所示: 在max那边是没有办法改名的,只能在Unity中改名. 方法1 1. 选中动画文件,按Ctrl + D,复制一份 ...

  6. MySQL常用命令(一)

    (1)库的基础操作 查看已有库: show databases; 创建库(制定默认字符集): ccreate database 库名 default charset=utf8; 查看创建库的语句: s ...

  7. ORC Creation Best Practices

    Short Description: ORC Creation Best Practices with examples and references. Article Synopsis. ORC i ...

  8. Codeforces Round #542 C. Connect 搜索

    C. Connect time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  9. 数据库索引 引用树形结构 B-数 B+数

    MySQL 为什么使用B+数 B-树和B+树最重要的一个区别就是B+树只有叶节点存放数据,其余节点用来索引,而B-树是每个索引节点都会有Data域. 这就决定了B+树更适合用来存储外部数据,也就是所谓 ...

  10. java中的多态是怎么体现的

    多态是父类的引用指向了自己的子类对象. 当调用方法时,会根据对象去调用方法,先在子类中找,没有就去父类中找 总结:成员变量是在编译阶段绑定的,方法时在运行阶段绑定的.属性不能重写,方法可以重写. pu ...