css_关系选择器

最新推荐文章于 2025-01-31 11:00:49 发布

A夏小小

最新推荐文章于 2025-01-31 11:00:49 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

文章标签： css关系选择器

本文链接：https://blog.youkuaiyun.com/weixin_42371832/article/details/99617329

本文深入解析了CSS中各种选择器的使用方法，包括通用选择器、类型选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。通过实例演示了如何精确地定位页面元素并应用样式。

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

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