css_关系选择器

最新推荐文章于 2024-07-22 20:38:06 发布

A夏小小

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量158

点赞数

文章标签： css关系选择器

本文链接：https://blog.csdn.net/weixin_42371832/article/details/99617329

版权

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <style type="text/css">  
            #frist p{/*包含选择器 first中所有的元素*/  
                color:red;  
            }  
            #frist>p{/*子选择器 first的子元素*，不包含first中的div块*/  
                color:blue;  
            }  
            #frist+p{/*相邻选择器 first之后的p元素*/  
                border: 1px solid red;  
            }  
            #frist~p{/* 兄弟选择器 body中的p*/  
                background: chartreuse;  
            }  
              
        </style>  
    </head>  
    <body>  
        <div id="frist">  
            <p>111111</p>  
            <p>222222</p>  
            <p>333333</p>  
            <div id="frist_ss">  
                <p>444444</p>  
                <p>555555</p>  
                <p>666666</p>  
            </div>  
        </div>  
        <p>777777</p>  
        <p>888888</p>  
        <p>999999</p>  
    </body>  
</html>