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

最新推荐文章于 2024-08-17 10:09:50 发布

jwz934738949

最新推荐文章于 2024-08-17 10:09:50 发布

阅读量1.1k

点赞数 2

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/88797246

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

在使用CSS进行修改标签样式时，有时同一个标签需要修改成不同的样式。但是以前的办法无法实现。这就需要使用后代选择器以及子元素选择器。

1、后代选择器

顾名思义，后代选择器就是选择后代，把一个标签的所有后代都进行修改。

格式为：标签1 标签2（标签以及后代之间需要使用空格来隔开）。

后代选择器也可以与id和class一起使用来表示后代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        ul p{
            color: red;
        }
        #n1 p{
            font-style: italic;
        }
        .c1 p{
            font-size: 40px;
        }
    </style>
</head>
<body>
<p>去年今日此门中，</p>
<ul id="n1" class="c1">
    <li>
        <p>人面桃花相映红。</p>
    </li>
    <p>人面不知何处去，</p>
</ul>
<p>桃花依旧笑春风。</p>
</body>
</html>

2、子元素选择器

与后代选择器不同，子元素选择器只会选择特定的标签进行修改。

格式为：标签1>标签2

和后代选择器一样，允许与id和class一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        ul > li > p {
            color: red;
        }

        #n1 > li > p {
            font-style: italic;
        }

        .c1 > li > p {
            font-size: 40px;
        }
    </style>
</head>
<body>
<p>去年今日此门中，</p>
<ul id="n1" class="c1">
    <p>人面桃花相映红。</p>
    <li>
        <p>人面不知何处去，</p>
    </li>
</ul>
<p>桃花依旧笑春风。</p>
</body>
</html>