css后代选择器，子元素选择器

最新推荐文章于 2023-08-12 10:35:34 发布

小鱼的池塘

最新推荐文章于 2023-08-12 10:35:34 发布

阅读量8.5k

点赞数 2

分类专栏：前端基础语言从学习文章标签： css 标签

本文链接：https://blog.csdn.net/haha_hello/article/details/54967551

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-css后代选择器.html</title>

    <!--
        后代选择器,找到指定特定的标签的所有后代,然后设置属性
        1,格式:
        标签名称1 标签名称2 ...{
                属性:值;
           }
        先找到名称叫做标签名称1的标签,然后在此标签下找到名称是标签名称2的所有标签,最后设置属性值
        例如:
        div p{
            }

        2,注意点:
        (1),后代选择器必须用空格隔开
        (2),后代不一定是儿子,也可以是孙子
        (3),后代选择器不仅仅可以使用标签名称,也可以使用其他的选择器(如id、class选择器)
    -->

    <style>
        /*div p{
            color: red;
        }*/
        /*#identtity p{
            color: red;
        }*/
        /*.para p{
            color: green;
        }*/
        .para .lip{
            color: greenyellow;
        }

    </style>
</head>
<body>
<p>我是段落</p>
<div id="identtity" class="para">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <p class="lip">我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

二，子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-css子元素选择器.html</title>
    <!--
        子元素选择器,找到指定标签中所有特定的直接子元素,设置属性值
        1,格式:
        标签名称1>标签名称2{
            属性:值;
        }
        2,注意点:
        (1),子元素选择器只会选择第一代选择器,不会选择被嵌套的其他标签
        (2),子元素两个标签之间是以>号隔开,不是空格
        (3),子元素选择器不仅仅可以使用标签的名称,还可以使用其他的选择器(如id、class选择器)
    -->
    <style>
        div>p{
            color: red;
        }
    </style>
</head>
<body>

<p>我是段落</p>
<div>
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <p>我是谁</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

三，后代选择器和子元素选择器的区别

<!--
        1,后代选择器和子元素选择器的区别
        (1),后代选择器利用空格作为连接符号,子元素选择器利用>符号作为链接符号
        (2),后代选择器指定的标签中,所有特定的后代标签,不管是儿子还是孙子... 都会被选中
            而子元素选择器指定的标签中,所有特定的直接后代标签,不包括孙子以后的标签,只会将直接后代选中
        2,共同点
        (1),都可以使用id,class,标签选择器名称作为选择器
        (2),都可以在使用空格或>连接符号无限的连接下去
            例如:选择器1 选择器2 选择器3 ...{}
                选择器1>选择器2>选择器3>...{}
        3,企业中的开发
        (1),如果想选中指定标签的所有特定的标签,就用后代选择器
        (2),如果想选中指定标签的所有特定的直接(儿子)标签,就使用子元素选择器
    -->

小鱼的池塘

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css后代选择器，子元素选择器

一，后代选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>12-css后代选择器.html</title> <!-- 后代选择器,找到指定特定的标签的所有后代,然后设置属性 1,格式: 标签名称1 标签名称2 ...{
复制链接

扫一扫