子代选择器与后代选择器的区别_后代选择器和子代选择器的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_29947843/article/details/116375755

本文介绍了CSS中的后代选择器和子代选择器的区别，并通过实例展示了它们的应用场景。同时，还探讨了如何通过这两种选择器来判断CSS属性是否具有可继承性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代与子代选择器的区别</title>
    <!--<link rel="stylesheet" type="text/css" href="*.css"/>-->
    <script language="javascript" type="text/javascript"></script>
    <style>
        .zero li
        {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul class="zero" >
        <li>我是祖先</li>
       <ul>zero
           <li>我是第二代</li>
                <ul>
                    <li>
                    我是第三代
                    </li>
                </ul>
      </ul>
    </ul>
</body>
</html>

使用子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代与子代选择器的区别</title>
    <!--<link rel="stylesheet" type="text/css" href="*.css"/>-->
    <script language="javascript" type="text/javascript"></script>
    <style>
        .zero>li
        {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul class="zero" >
        <li>我是祖先</li>
       <ul>zero
           <li>我是第二代</li>
                <ul>
                    <li>
                    我是第三代
                    </li>
                </ul>
      </ul>
    </ul>
</body>
</html>

子代选择器与后代选择器的区别是：

后代包含子代，但是后代不全是子代。