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 一次向表中插入多条数据的方法分享 (转自:http://www.maomao365.com/?p=6058)

    转自:http://www.maomao365.com/?p=6058) <span style="font-size:16px;font-weight:bold;"> ...

  2. Sql Full-Text Filter

    SQL Server 全文索引介绍(转载) 概述 全文引擎使用全文索引中的信息来编译可快速搜索表中的特定词或词组的全文查询.全文索引将有关重要的词及其位置的信息存储在数据库表的一列或多列中.全文索引是 ...

  3. postgre中类似oracle的sql%rowcount用法

    get diagnostics cnt := row_count; 现在有两个表tab1和tab2,两个表的格式相同,tab1中有1000条数据,tab2中0条数据 创建测试功能函数 create o ...

  4. 几个常用dos网络命令

    ping www.baidu.com 测试网络的同时,查看ip地址 1. 如图:百度的ip为  14.215.177.39.浏览器直接输入ip即可进入百度首页. 另外还有,14.215.177.38 ...

  5. python黑帽子

    1.TCP客户端 #AF_INET 使用标准的IPv4地址或者主机名 #SOCK_STREAM是一个客户端 import socket target_host = 'www.google.com' t ...

  6. Unity Shader 基础（3） 获取深度纹理

    Unity提供了很多Image Effect效果,包含Global Fog.DOF.Boom.Blur.Edge Detection等等,这些效果里面都会使用到摄像机深度或者根据深度还原世界坐标实现各 ...

  7. mysql数据库显示 1164 table *** doesn't exist

    问题出现场景: 以前mysql安装在C盘,后来重装系统,将mysql安装在了D盘,重装之前,将mysql的Data 文件夹备份了下来,mysql重新安装好之后,将原来的Data 文件夹内的数据库文件夹 ...

  8. Eclipse JVM terminated.exit code=13

    今天,在安装Nomad PIM时碰到这个问题,因为这个应用是基于32位的Eclipse平台开发的,而我的电脑是64位的Windows 7,当然安装的JDK也是64位的,于是报错. 搜索了网上,给了许多 ...

  9. 用H5开发微信还是开发APP？

    用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...

  10. NOsql总结

    NOsql总结 1.存储: 任意格式的数据:值对存储,列存储,文档存储,图形数据库 灵活的表结构支持:类型动态.scheme动态: 灵活的存储形式:列存储: 弱关系:NoSQL数据库种类繁多,但是一个 ...