<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用选择器</title>
        <style type="text/css">
            /* 为页面中的所有的p元素,设置一个字体颜色为红色 */
            /* 
                元素选择器
                    作用: 通过元素选择器可以选择页面中的所有指定元素
                    语法: 标签名{}
             */

            p {
                color: red;
            }

            h1 {
                color: aqua;
            }
            
            body{
                background-color: black;
            }
            
            /* 
                id选择器
                通过元素的id属性值选择唯一的一个元素
             */
            #p1 {
                color: chartreuse;
            }
            
            /* 
                类选择器
                class属性和id属性类似,只不过class属性可以重复
                拥有相同class属性值得元素,我们说他们是一组元素
                语法:
                    .class属性值{}
                
                可以同时为一个元素设置多个class属性值,多个值之间用空格隔开
             */
            .p2{
                color: aliceblue;
            }
            
            .p3{
                color: blueviolet;
            }
            
            /* 
                选择器分组
                    通过选择器分组可以同时选中多个选择器对应的元素
                    语法:
                        选择器1,选择器2,选择器N{}
             */
            #p1,.p2,h1{
                background-color: darkorange;
            }
            
            /* 
                通配选择器
                他可以选择页面上所有的元素
             */
            
            *{
                margin: 0;
                padding: 0;
            }
            
            /* 
                复合选择器(交集选择器)
                    作用:
                        可以选中同时满足多个选择器的元素
                    语法:
                        选择器1选择器2选择器N{}
             */
            span.p3{
                color: blanchedalmond;
            }
            
        </style>
    </head>
    <body>
        <h1>清平调·其一</h1>
        <span class="p3">李白</span>
        <p class="p3">云想衣裳花想容,</p>
        <p id="p1">春风拂槛露华浓.</p>
        <p class="p2">若非群玉山头见,</p>
        <p class="p2 p3">会向瑶台月下逢.</p>
    </body>
</html>
posted on 2021-06-29 10:43 leiyanting 阅读(156) 评论(0) 收藏举报
刷新页面返回顶部
导航
