一、子元素选择器

1.定义：找到指定标签中所有特定的直接子元素，然后设置属性

2.格式：

标签名称一>标签名称2｛

      属性：值；

｝

3.释义：先找到叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素

        div>p{

            color:red;

        }

.......省略代码.......       

<div>

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

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

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

    <ul>

        <li><p>我是段珞4</p></li>

    </ul>

</div>



4.注意

：

（1）子元素选择器智慧查找儿子，不会查找孙子，重孙子等等

（2）子元素选择器之间需要用“>”符号相连接，而且不能有空格。

（3）子元素选择器不仅仅可以用标签名称，还可以用其他选择器。如：用id选择器或者classa选择器。

        #id1>p{

            color:green;

        }

.......省略代码.......

<div id="id1">

    <p>我是带id的那个测试</p>

</div>

（4）子元素选择器可以用>符号一致延续下去。例如：

        div>ul>li>p{

            color:blue;

        }

  .......省略代码.......

  <div>

    <ul>

        <li><p>我是段珞4</p></li>

    </ul>

</div>

二、后代选择器与子元素选择期的区别和相同点以及企业开发中如何选择

1.二者区别

（1）

后代选择器使用空格作为连接符号

子元素选择器使用>作为连接符号

（2）后代选择器会选中指定标签，所有的特定后代标签，也就是选中儿子/孙子...，只要是被放到指定标签中的特定标签都会选中（即不严格后代）

子元素标签只会选中特定标签中，所有的特定的直接标签，也就是只会选中特定的儿子标签（严格后代）

2.二者的共同点

（1）都可以使用标签名称，id名称，class名称

（2）都可以通过各自的连接符号一致延续下去

3.适用场景

通过不同点就可以看出来了，或者他们的定义

三、交集选择器

1.定义：给所有选择器选中的标签中，相交的那部分标签设置属性

2.格式：


选择器1选择器2｛

    属性：值；

｝

3.注意点：

（1）选择器和选择器之间没有任何连接符号

（2）选择器可以使用标签名称/id名称/class名称


    <style>

        p.abc1{

            color:red;

        }

        .abc2#open1{

            color: blue;

        }

</style>

</head>

<body>

<p class="abc2" id="open1">测试1</p>

<p class="abc1">测试2</p>

<p class="abc3">测试3</p>

</body>

（3）企业开发中很少使用，只做了解，用其他选择器足以完成，不要这么​复杂的结构。

四、源码：

d72_subelement_selector

d74_intersection_selecotr

地址:

https://github.com/ruigege66/HTML_learning/tree/master

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

 

HTML连载19-子元素选择器&交集选择器的更多相关文章

  1. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  2. css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

    高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...

  3. jQuery选择器(子元素过滤选择器)第七节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  5. CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

    CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  6. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  7. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  8. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  9. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

随机推荐

  1. LeetCode OJ平台Sort Colors讨论主题算法

    原题如下面,这意味着无序排列(由0,1,2组成).一号通.组织成若干阵列0-几个1-几个2这样的序列. Given an array with n objects colored red, white ...

  2. 开源库（要不要重新制造轮子）—— C/C++、Java、Python

    谷歌近期开源的SLAM方案:Cartographer Boost:准标准的C++库. Eigen3: 准标准的线性代数库. Lua:非常轻量的脚本语言,主要用来做Configuration Ceres ...

  3. jquery 复选框操作-prop()的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. C# 声明基于角色的安全性

    using System;using System.Collections.Generic;using System.Linq;using System.Security;using System.S ...

  5. AY的Dapper研究学习-基本入门-C#开发-aaronyang技术分享

    原文:AY的Dapper研究学习-基本入门-C#开发-aaronyang技术分享 ====================www.ayjs.net       杨洋    wpfui.com      ...

  6. 【C#】VS2012+InstallShield2013制作软件更新包

    原文:[C#]VS2012+InstallShield2013制作软件更新包 上篇文章介绍了如何使用installshield制作软件的安装包,见地址:http://blog.csdn.net/cat ...

  7. 从零开始学习音视频编程技术（三） 开发环境搭建（Qt4.86手动设置环境，主要就是设置g++和qmake，比较透彻，附下载链接）

    1.先下载安装Qt 我们使用的版本是4.8. 可以自行百度下载也可以从下面的网盘地址下载: Qt库和编译器下载: 链接:http://pan.baidu.com/s/1hrUxLIG 密码:0181 ...

  8. C# 查农历 阴历 阳历 公历 节假日

    原文:C# 查农历 阴历 阳历 公历 节假日 using System;using System.Collections.Generic;using System.Text; namespace ca ...

  9. 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I

    原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...

  10. 利用BLCR加速android的启动（android4.2）

    BOSS要求提高安卓系统的启动速度,优化bootloader和kernel后,发现还是达不到要求,没办法才打起zygote的注意. ================================== ...