CSS3选择器中的儿子选择器与序选择器

star9595

于 2018-05-06 11:51:33 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u014042372/article/details/80212940

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了CSS3中的两种重要选择器：儿子选择器与序选择器。儿子选择器用于选取指定元素的直接子元素，而序选择器则用于选取特定位置的子元素。通过实例展示了如何使用这两种选择器来精确地控制网页中元素的样式。

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

CSS3选择器中的儿子选择器与序选择器

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*儿子选择器*/
        div>p{
            color: red;
        }

        /*序选择器*/
        div ul li:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <!--儿子选择器 IE7开始兼容，可以用类选择器完成同样功能-->
    <div>
        <ul>
            <li>
                <p>我的颜色</p>
            </li>
        </ul>
        <p>我的颜色</p>
    </div>

    <!--序选择器-->
    <div>
        <ul>
            <li>郑州</li>
            <li>郑州</li>
            <li>郑州</li>
        </ul>
    </div>
</body>
</html>