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. [20180928]ora-01426(补充).txt

    [20180928]ora-01426(补充).txt --//链接:http://www.itpub.net/thread-2105458-1-1.html--//做一点点必要的补充: 1.环境:S ...

  2. c/c++ 数组的智能指针 使用

    数组的智能指针 使用 数组的智能指针的限制: 1,unique_ptr的数组智能指针,没有*和->操作,但支持下标操作[] 2,shared_ptr的数组智能指针,有*和->操作,但不支持 ...

  3. 【Git学习一】Git 初始化

    在开始Git之旅之前,我们需要设置一下Git的配置变量. 1.告诉Git当前用户的姓名和邮件地址,配置用户名和邮件地址将在版本库提交时用到. 例子: ------------------------- ...

  4. IDEA: Call Hierarchy

    在日常开发中,查看某个方法.字段可能被用在哪些地方.这个是个很常见的操作. 例如,在使用Eclipse时,选择方法后,右键菜单里选择 show call hierarchy,即可查看有哪些地方调用了这 ...

  5. FCM算法的matlab程序（初步）

    FCM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648430.html文章中已经介绍了FCM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...

  6. MATLAB一元线性回归分析

    MATLAB一元线性回归分析应用举例 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ huigui.m function [b,bint,r,rint, ...

  7. java用JDBC连接MySQL数据库的详细知识点

    想实现java用JDBC连接MySQL数据库.需要有几个准备工作: 1.下载Connector/J的库文件,下载Connector/J的官网地址:http://www.mysql.com/downlo ...

  8. 在Intellij IDEA下通过Hibernate逆向生成实体类

    前言:在IDEA中,通过相关插件,可以利用Hibernate逆向生成数据表对应的实体类.具体操作及注意事项见本篇随笔. 1.创建一个基于maven的hibernate工程.并在工程中添夹hiberna ...

  9. 第二十六篇:USB3.0高带宽ISO(48KBytes/125us)实战

    USB3.1技术已经推出, 10Gbps的速率足以满足数据, HD视频传输的要求. 要步入USB3.1的研发, 还得将USB3.0的基础打扎实. 微软提供的SUPER MUTT仅仅包括一个接口0, 其 ...

  10. 解决y7000笔记本ubuntu下wifi无法连接问题

    查看wifi与蓝牙硬件开关,发现ideapad的硬件模块都是关闭的 rfkill list all 打开终端 输入 sudo gedit /etc/rc.local 写入以下内容 进行保存 #!/bi ...