后代选择器和子元素选择器

最新推荐文章于 2024-10-05 19:19:05 发布

杨宗健

最新推荐文章于 2024-10-05 19:19:05 发布

阅读量1.4k

点赞数 2

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/66975948

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、后代选择器

后代：儿子，孙子，重孙子......

<标签1>

<标签2>

<标签3>

<标签4> </标签4>

</标签3>

</标签2>

</标签1>

标签1是父标签，标签2是标签1的儿子，标签3是标签1的孙子，标签4是标签1的重孙子。

所以标签2,3,4,都是标签1的后代标签。

后代选择器的优势：

（1）如果在公司中有几千行的代码，不用像id选择器和class选择器一样取名字（id的名称不能相同，class的名称可以相同），因为取名字在开发中是很麻烦很难得一件事情。

（2）很容易的找到想要修饰的位置。就像知道了你的父亲，又通过你的父亲知道了你的信息。

后代选择器的格式：

（1）标签名称1 标签名称2{

属性：值；

}

（2）#id名称标签名称{

属性：值；

}

（3）标签名称 #id名称{

属性：值；

}

（4）.类名标签名称{

属性：值；

}

（5）标签名称 .类名{

属性;值；

}

（6）#id名称 #id名称{

属性：值；

}

（7）.类名 .类名{

属性：值；

}

（8）#id名称 .类名{

属性：值；

}

（9）.类名 #id名称{

属性：值；

}

例子：

后代标签全部改变样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <base target="_self">
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

后代标签不全部改变样式：（只改变想要改变的）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <base target="_self">
    <style>
        div #xxx{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p id="xxx">我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <base target="_self">
    <style>
        div .xxx{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p class="xxx">我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

3.不用id和class类选择器，但是用后代选择器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <base target="_self">
    <style>
        div ul li p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

重点：一个空格代表一个后代。第一个是父代，后面的后代。

二、子元素选择器

（1）子元素选择器只会查找儿子，不会查找其他的后代。只会查找直接的儿子（亲儿子）。

（2）子元素选择器之间需要用>符号连接，不能用空格。

（3）子元素选择器格式：

标签名称1>标签名称2{

属性：值；

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <base target="_self">
    <style>
        div>p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

#id名称>标签名称{

属性：值；

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <base target="_self">
    <style>
        #xxx>p{
            color: red;
        }
    </style>
</head>
<body>
    <div id="xxx">
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

标签名称>#id名称{

属性：值；

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <base target="_self">
    <style>
        div>#xxx{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="xxx">我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

.类名>标签名称{

属性：值；

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <base target="_self">
    <style>
        .xxx>p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="xxx">
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

标签名称>.类名{

属性;值；

}

#id名称>#id名称{

属性：值；

}

.类名>.类名{

属性：值；

}

#id名称>.类名{

属性：值；

}

.类名>#id名称{

属性：值；

}

（4）不能用id选择器和class类选择器，只能用子选择器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子元素选择器</title>
    <base target="_self">
    <style>
        div>ul>li>p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落</p>
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

div>ul>li>p意思是： div是父代，先找到div的直接儿子ul，然后再找到ul的直接儿子li，最后再找到li的直接儿子p。

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

后代选择器使用空格作为连接符号。

子元素选择器使用>作为连接符号。

后代选择器会去查找所有的属于父代的后代标签，如：儿子，孙子，重孙子......等标签。（默认查找）

子元素选择器只会去查找直接儿子，就是特定的直接的儿子，不会去查找孙子，重孙子等标签。

后代选择器和子元素选择器都可以使用标签名称、id名称、class类名称来作为选择器。

后代选择器和子元素选择器都可以用属于自己的连接符号一直延续下去。如： div ul li p{ 属性:值; } 或 div>ul>li>p{ 属性:值; } 。