一、子元素选择器

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. DDD实战8_1 实现对领域中连接字符串的可配置

    1.在webapi的配置文件中配置连接字符串节 2.在webapi的startup类中的Configure方法中 将工具类里面AppSetting的静态Section的值 对应上webapi的配置文件 ...

  2. 并行编程OpenMP基础及简单示例

    OpenMP基本概念 OpenMP是一种用于共享内存并行系统的多线程程序设计方案,支持的编程语言包括C.C++和Fortran.OpenMP提供了对并行算法的高层抽象描述,特别适合在多核CPU机器上的 ...

  3. 机器学习: Python with Recurrent Neural Network

    之前我们介绍了Recurrent neural network (RNN) 的原理: http://blog.csdn.net/matrix_space/article/details/5337404 ...

  4. Oracle实践--PL/SQL综合之分页存储过程

    Oracle PL/SQL分页的存储过程 Oracle,分页,存储过程三个词结合起来,来个综合点的小练习,运用之前的PL/SQL创建一个分页的存储过程,仅仅须要简单几步就可以. 1.声明一个引用游标 ...

  5. 用游戏杆控制WPF中三维模型

    原文:用游戏杆控制WPF中三维模型 用游戏杆控制WPF中三维模型   今天心情比较好,不写WF的文章了,换个主题.写一个我最最最擅长的内容.   例子下载: http://files.cnblogs. ...

  6. mingw-w64-3.10-osx10.9.sh，uninstall-macports.sh，Build NSIS on OSX

    https://gist.github.com/artynet/188bb34cfc94acdb554d283a3502770a --cross-compile-prefix=i686-w64-min ...

  7. Call asynchronous method in constructor

    using System; using System.ComponentModel; using System.Threading.Tasks; public sealed class NotifyT ...

  8. 更改开机默认不显示explorer.exe，直接启动自己写的EXE程序方法

    原文:更改开机默认不显示explorer.exe,直接启动自己写的EXE程序方法 更改开机默认不显示explorer.exe,直接启动自己写的EXE程序的函数: bool UpdateWinlogon ...

  9. MinDoc v0.6 发布，轻量级文档在线管理系统

    更新日志 新增 标签功能,可以根据标签组织项目 新增 用户删除功能,删除后的用户项目以及其他数据会自动转移到超级管理员账户上 新增 项目描述支持Markdown语法 优化 项目标签添加效果 优化 登录 ...

  10. Win8 Metro(C#)数字图像处理--2.46图像RGB分量增强效果

    原文:Win8 Metro(C#)数字图像处理--2.46图像RGB分量增强效果  [函数名称] RGB分量调整         RGBAdjustProcess(WriteableBitmap  ...