Loading

css - 01结构伪类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CssBase</title>
    <link rel="stylesheet" href="lesson.css" type="text/css">
    <style>
        /*结构选择器从前往后，伪类选择器从后往前*/

        /*article元素的后代中只有一个span元素*/
        /*article span:only-child {*/
        /*    color: red;*/
        /*}*/

        /*article元素的后代中只有一个span类型元素*/
        /*article span:only-of-type {*/
        /*    color: red;*/
        /*}*/

        /*article元素的后代中第2个是span元素*/
        /*article span:nth-child(2) {*/
        /*    color: red;*/
        /*}*/

    </style>
</head>
<body>

<!--article元素的后代中只有一个span元素-->
<!--<article>-->
<!--    <span>houdunren.com</span>-->
<!--    <aside>-->
<!--        <span>houdunwang.com</span>-->
<!--    </aside>-->
<!--    <strong>hdcms.com</strong>-->
<!--</article>-->

<!--article元素的后代中只有一个span类型元素-->
<!--<article>-->
<!--    <span>houdunren.com</span>-->
<!--    <aside>-->
<!--        <span>houdunwang.com</span>-->
<!--    </aside>-->
<!--    <strong>hdcms.com</strong>-->
<!--</article>-->

<!--article元素的后代中第2个是span元素-->
<!--<article>-->
<!--    <span>houdunren.com</span>-->
<!--    <aside>-->
<!--        <span>houdunwang.com</span>-->
<!--        <span>hdcms.com</span>-->
<!--    </aside>-->
<!--    <span>hdphp.com</span>-->
<!--</article>-->

</body>
</html>

 

posted @ 2022-04-21 11:42  云起时。  阅读(32)  评论(0)  编辑  收藏  举报