常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>
    <style>
        /*
            将所有的段落设置为红色字体

            元素选择器
                作用: 根据标签名来选择指定的元素
                语法: 标签名{}
                例子: p{} h1{} div{}
         */
         p{
             color: red;
         }

         h1{
             color: green;
         }

         /*
            将儿童相见不相识设置蓝色 

            id选择器
                作用: 根据元素的id属性值选中一个元素
                语法: #id属性值{}
                例子: #box{} #red{}
          */
        #red{
            color: deepskyblue;
        }

        /*
            将秋水共长天一色,落霞与孤鹜齐飞设置为黄色

            类选择器
                作用: 使用元素的class属性值选中一组元素
                语法: .class{}
         */
         .gold{
             color: gold;
         }
        .p{
            font-size: 30px;
        }

        /*
            通配选择器
                作用: 选中页面中的所有元素
                语法: *{}
         */
         *{
             background-color: gray;
         }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- 
        class 是一个标签的属性, 它和id类似, 不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
     -->
    <p class="gold p">秋水共长天一色</p>
    <p class="gold">落霞与孤鹜齐飞</p>
</body>
</html>
posted @ 2021-03-03 16:03 博客帅帅阅读(76) 评论(0) 收藏举报
刷新页面返回顶部
博客帅帅

常用选择器

公告
