Web full stack - descendant selectors and child class selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        /*
        div p{
            color: red;
        }
        */
        /*
        #identity p{
            color: red;
        }
        */
        /*
        .para p{
            color: blue;
        }
        */
        /*
        #identity #iii{
            color: skyblue;
        }
        */
        /*
        #identity .ccc{
            color: purple;
        }
        */
        div ul li p{
            color: red;
        }
    </style>
</head>
<body>
<!--
1.什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:
标签名称1 标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
div p{}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去
-->
<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <!--<p id="iii" class="ccc">我是段落</p>-->
            <p>我是段落</p>
        </li>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: blue;
        }
        */
        div>ul>li>p{
            color: purple;
        }
    </style>
</head>
<body>
<!--
1.什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:
标签名称1>标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
-->
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器和子元素选择器</title>
</head>
<body>
<!--
1.后代选择器和子元素选择器之间的区别?
1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

-->
</body>
</html>

Web full stack - descendant selectors and child class selector

Guess you like