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

最新推荐文章于 2024-06-13 22:49:40 发布

程欢o

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量3.8k

点赞数 1

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_29947843/article/details/116375755

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

使用后代选择器

<!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>

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

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

验证中会遇到的问题

当使用的css属性是可继承的会导致，使用子代选择器、后代选择器展示的效果是一样的。

可继承的属性：

可继承的样式： font-size, font-family, color, text-indent;

不可继承的样式：border, padding, margin, width, height ;

同理，可以使用子代选择器和后代选择器去验证属性是否可继承。

程欢o

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
子代选择器与后代选择器的区别

使用后代选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后代与子代选择器的区别</title>  <script language="javascript"
复制链接

扫一扫