HTML连载19-子元素选择器&交集选择器

时间 2019-12-11

标签 html 连载元素选择器交集栏目 HTML 繁體版

原文原文链接

1、子元素选择器git

1.定义：找到指定标签中全部特定的直接子元素，而后设置属性github

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）子元素选择器之间须要用“>”符号相链接，并且不能有空格。ui

（3）子元素选择器不单单能够用标签名称，还能够用其余选择器。如：用id选择器或者classa选择器。spa

        #id1>p{

            color:green;

        }

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

<div id="id1">

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

</div>

（4）子元素选择器能够用>符号一致延续下去。例如：.net

        div>ul>li>p{

            color:blue;

        }

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

  <div>

    <ul>

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

    </ul>

</div>

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

1.两者区别

（1）

后代选择器使用空格做为链接符号

子元素选择器使用>做为链接符号

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

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

2.两者的共同点

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

（2）均可以经过各自的链接符号一致延续下去

3.适用场景

经过不一样点就能够看出来了，或者他们的定义

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）企业开发中不多使用，只作了解，用其余选择器足以完成，不要这么复杂的结构。

4、源码：

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大数据学习视频礼包