一、子元素选择器

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. 机器学习、深度学习实战细节（batch norm、relu、dropout 等的相对顺序）

    cost function,一般得到的是一个 scalar-value,标量值: 执行 SGD 时,是最终的 cost function 获得的 scalar-value,关于模型的参数得到的: 1. ...

  2. 使用 Capistrano 和写作 Ruby 迭代边缘部署

    想边自己写ruby代码,边部署随时能够到处查看,heroku域名又不友好,速度在国内又慢.于是乎想起来capistrano,于是学起 ... capistrano 一点入门认知 https://www ...

  3. 通通玩blend美工（1）——荧光Button

    原文:通通玩blend美工(1)--荧光Button 最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...) 看着各位大虾出 ...

  4. wpf窗体定位

    原文:wpf窗体定位 据WPF外包小编了解,通常,不需要在屏幕上明确定位窗口.而是简单地将WindowState属性设置为Normal,并忽略其他所有细节.另一方面,很少会将WindowStartup ...

  5. WPF 列表样式

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  6. wcf中的消息模式

    1请求响应模式 a.wcf中的消息模式默认是请求响应模式 b.返回值是void默认也是请求响应模式,可返回服务端的错误信息 c.客户端在请求后,当前线程停止真到接受收服务器的响应 [Opereatio ...

  7. 让用户使用第三方账号（如亚马逊账号）接入AWS IoT系统

    我们想象这么一个IoT应用场景:厂商A使用AWS IoT来开发物联网解决方案,那么A把设备卖给用户的时候,需要使用户能够登入AWS IoT系统来控制其购买的A的设备,也就是说给用户分配适当的权限.下面 ...

  8. 了解 XML 数字签名

    http://www.cnblogs.com/flyxing/articles/91734.html http://www.cnblogs.com/wuhong/archive/2010/12/20/ ...

  9. Win10《芒果TV》商店内测版更新至v3.7.65.0：跨平台UI新体验，铺路SP

    Win10<芒果TV - Preview>是Win10<芒果TV>官方唯一指定内测预览版,最新的改进和功能更新将会在此版本优先体验. 春去夏来,初心犹在,Win10<芒果 ...

  10. ReportViewer，RDLC 报表开发之个性化样式

    原文:ReportViewer,RDLC 报表开发之个性化样式 报表开发中,客户对样式提出了要求: 1.工具栏上显示每页条数 2.只导出Excel,不需要下拉菜单. 3.报表上显示的图表,分页时,每页 ...