css关系选择器

最新推荐文章于 2023-08-07 17:18:06 发布

踏雪寻鹭

最新推荐文章于 2023-08-07 17:18:06 发布

阅读量107

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_73143398/article/details/126292550

版权

子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

后代选择器

作用：通过指定祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

下一个兄弟选择器（注意必要要紧挨着）：

语法：兄+弟{}

所有兄弟选择器

语法：#cs+英文状态下的波浪号+P{color+加颜色}

 <style>
        #cs>p{color: red;}
         div span{font-size: 30px;}
        #cs+p{
            background-color: green;
        }
        #cs~p{ color: blue;}
    </style>
</head>
<body>
    <div id="cs"></div>
    <p>小超市</p>
    <p>小超市</p>
    <p>小超市</p>
    <div id="cs"> 
        <p>超市</p>
        <p>衣服
            <span>男生衣服</span>
            <span>女士衣服</span>
            <span>儿童衣服</span>
        </p>
        <p>蔬菜</p>

    </div>
</body>