CSS学习记录——常见的选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的选择器</title>
    <style type="text/css">
    /* 
    元素选择器，直接使用标签名
     */
    h1{
        color:red;
    }
    /* id选择器 
       通过元素的id属性值选中唯一的一个元素
       id只能被一个元素使用
       例如，只能有一个p使用特定的一个id选择器
    */
    #idname{
       font-size: 40px;
    }
    /* class选择器
        通过元素的class属性值，选中一组元素
        。class{}
        一个元素可以上设置多个class选择器，多个值之间用空格隔开
     */
     .p2{
         color: skyblue;
     }
     /* 选择器分组
        通过选择器分组可以同时选中多个选择器对应的元素
        语法：选择器1，选择器2，选择器n{}    
      */
      #p1,.a1,.a5{
          color: #000;
      }
      /* 
      统配选择器：选择所有的元素
      语法*{}
       */
       *{
           background-color: teal;
       }
       /*复合选择器，交集选择器
       作用：可以选中同时满足多个条件的元素 
       语法：
       选择器1选择器2
        */
        span.p4{
            color: chocolate;

        }
    </style>
</head>
<body>
    <h1>This is h1's css!</h1>
    <p id="idname">This is a id选择器的效果</p>
    <p class="p2">This is class选择器</p>
    <p class="p2">This is class选择器</p>
     <span>I am span </span>
</body>
</html>

 

posted @ 2020-03-06 13:07  墩墩蹲  阅读(142)  评论(0)    收藏  举报