CSS3学习笔记——常用选择器

2020-12-26 15:30:59 阅读：146 来源： 互联网

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

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

          p{
             color: crimson;
         }
         h1{
             color:darkblue;
         }
          */

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

        #red{
            color: darkred;
        }
        */
        /* 
        类选择器（class选择器）：
            作用：根据元素的class属性值选中一组元素
            语法：.class属性值

         .blue{
            color: blue;
         }
         */
        /*
            通配选择器
                作用：选中页面中所有的元素
                语法：*{} 
        
         *{
             color: blue;
         }
         */
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>少小离家老大回</p>
    <p id="red">乡音无改鬓毛衰</p>
    <p class="blue">儿童相见不相识</p>
    <!-- 
        class是一个标签的属性，它和id类似，不同的是class是可以重复使用的
        我们可以通过class属性来为元素分组
        可以同时为一个元素指定多个class属性，多个class值之间使用空格隔开
     -->
    <p class="blue red">秋水共长天一色</p>

    <p>落霞与孤鹜齐飞</p>
    <p>笑问客从何处来</p>
</body>
</html>

本笔记是观看尚硅谷HTML5+CSS3时所作，仅供参考！

标签：CSS3,blue,color,元素,笔记,id,选中,选择器
来源： https://blog.csdn.net/m0_47015897/article/details/111748204

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

ICode9

CSS3学习笔记——常用选择器