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

倒霉男孩

于 2025-04-16 11:00:00 发布

阅读量543

点赞数 4

分类专栏： html+css学习笔记文章标签： css javascript 前端

本文链接：https://blog.csdn.net/2401_86523075/article/details/147257646

版权

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

后代选择器

后代选择器（Descendant Selector）用于选择某个元素内部的所有后代元素（无论嵌套层级有多深）。后代选择器使用空格分隔父元素和后代元素的选择器。
1.选择 <div>元素内的所有<p>元素

div p {
            color: gold;
        }

选择 <ul>元素内的所有<li>元素

 ul li{
            list-style-type: square;
        }

选择<div>元素内的所有<a>元素

div a {
            text-decoration: none;
        }

后代选择器会选择父元素内满足条件的后代元素，而不仅仅是直接的子元素。
以下是一个使用后代选择器的示例，展示如何将样式应用到HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div p {
            color: gold;
        }
        ul li{
            list-style-type: square;
        }
        div a {
            text-decoration: none;
        }
    </style>

</head>
<body>
    <div>
        <p>这是一个段落</p>
        <a href="#"> 这是一个link inside a div.</a>
        <ul>
            <li>item1</li>
            <li>item2</li>
        </ul>
    </div>
</body>
</html>

在上面的示例中，我们使用后代选择器将样式应用到父元素内满足条件的后代元素。

子元素选择器

子元素选择器（Child Selector）用于选择某个元素的直接子元素（仅限第一层嵌套）。子元素选择器使用>符号分隔父元素和子元素的选择器。

以下是关于子元素选择器的示例：
1.选择<div>元素内作为直接子元素的所有<p>元素

div > p {
            color: gold;
        }

2.选择<ul>元素内作为直接子元素的所有<li>元素

ul > li{
            list-style-type: square;
        }

3.选择元<nav>素内作为直接子元素的所有<a>元素

div > a {
            text-decoration: none;
        }

请注意，子元素选择器只会选择父元素的直接子元素，而不会选择更深层次的后代元素。
以下是使用子元素选择器示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > p {
            color: gold;
        }
        ul > li{
            list-style-type: square;
        }
        div > a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <p>a paragraph inside a div</p>
        <a href="#">a link inside a div.</a>
        <ul>
            <li>List item1</li>
            <li>List item2</li>
        </ul>
        <nav>
            <a href="#">link 1</a>
            <a href="#">link 2</a>
        </nav>
    </div>
</body>
</html>