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

2022-06-03 11:32:37 阅读：155 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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