CSS学习——常见的选择器

时间:2020-03-06
本文章向大家介绍CSS学习——常见的选择器,主要包括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>

原文地址:https://www.cnblogs.com/yxl-/p/12422541.html