首页 > 其他分享> > 03.常用选择器——元素选择器，id选择器，类选择器，通配选择器

03.常用选择器——元素选择器，id选择器，类选择器，通配选择器

2022-06-03 11:32:37 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置为红色（字体）

            元素选择器
                作用：根据标签名来选中指定的元素
                语法：标签名{}
                例子：
                    p{} 
                    h1{} 
                    div{}

            p{
                color:red;
            }
        */

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

            id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#+id属性值+{}
                例子：#redcolor{} #box{}
        */

        /*
        #redcolor{
            color:red;
        }
        */

        /* 
            将秋水……和落霞……设置为蓝色

            类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.+class属性值+{}
        */

        .bluecolor{
            color:blue;
        }

        .abc{
            font-size: 20px;
        }

        /* 
            通配选择器
                作用：选中页面中的所有元素
                语法：*{}
        */
        *{
            color:red;
        }

    </style>
</head>
<body>
    <h1 class="bluecolor abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="redcolor">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- 
        class是一个标签的属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
     -->
    <p class="bluecolor">秋水共长天一色</p>
    <p class="bluecolor">落霞与孤鹜齐飞</p>

</body>
</html>

标签：通配,03,color,元素,选择器,选中,id,red
来源： https://www.cnblogs.com/sherryyuan/p/16339725.html