一、子元素选择器

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. C++第11周(春)项目4 - 类族的设计

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目4 - 类族的设计]按下面的提示,由基类 ...

  2. glibc头文件和宏定义

    头文件没啥好说的,无非就是" "和< >的区别,这估计只要是学过C/C++的人都明白.现在的编译器对头文件的包含顺序没有要求,但老的C实现则不一样.当然,我们现在无需关 ...

  3. Adapter的泛型

    宗旨:GetView方法放在具体的Activity/Fragment里面实现,其他的均可以复用 /// <summary> /// 通用适配器:新建GetViewEvent委托+OnGet ...

  4. ES6/ES2015核心内容（转载）

    ES6其实就是ES2015,因为是2015年发布的,所以也叫ES2015.这个版本是JS的最新版本,很多浏览器还不支持,所有有了babel,专门把最新的JS转换一下,让大部分浏览器都支持的JS版本. ...

  5. Windows 10开发基础——VS2015 Update1新建UWP项目，XAML设计器无法加载的解决

    这次,我们来解决一个问题...在使用Visual Studio 2015 Update 1的时候,新建一个UWP的项目,XAML设计器就会崩,具体异常信息如下图: 解决方法如下:下面圈出的那个路径就按 ...

  6. Win8Metro(C#)数字图像处理--2.5图像亮度调整

    原文:Win8Metro(C#)数字图像处理--2.5图像亮度调整  2.5图像亮度调整函数 [函数名称] 图像亮度调整函数BrightnessAdjustProcess(WriteableBit ...

  7. jquery.tmpl.js使用外部 jQuery Template文件

    $.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever ...

  8. oracle延迟块清除

    oracle在执行一些DML操作时,会在block上有活动事务的标志,如果一个事务commit后,由于某些block在commit之前已经写回datafile, 或者事务影响到的block数过多,则c ...

  9. Linux 下 Redis 服务 Shell启动脚本

    # chkconfig: 2345 10 90 # description: Start and Stop redis  PATH=/usr/local/bin:/sbin:/usr/bin:/bin ...

  10. python 动态调用模块&类&方法

    转载自:http://www.cnblogs.com/bluefrog/archive/2012/05/11/2496439.html 一直想知道python里有没有类似php中的 $classnam ...