7CSS选择器210909 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*1 元素选择器*/
       p{
           text-align: center;
           color: red;
       }

        /*2 id选择器*/
        #paral1{
            text-align: center;
            color: yellow;
        }

        /*3 类选择器（适用于所有元素）*/
        .center{
            text-align: center;
            color: blue;
        }

        /*4 类选择器（仅适用于<p>元素）*/
        p.center1{
            text-align: center;
            color: green;
        }

        /*5 引用两个类的HTML元素*/
        p.center2{
            text-align: center;
            color: orange;
          }
        p.large{
            font-size: 300%;
        }

        /*6 通用选择器*/
        /**{*/
        /*    text-align: center;*/
        /*    color: black;*/
        /*  }*/


        /*7 分组选择器*/
        h1, h2, p{
            text-align: center;
            color: pink;
            font-size: 300%;
          }
    </style>

</head>
<body>

    1 元素选择器
    p{
    text-align: center;
    color: red;
    }
    <p>every paragraph will be affected by the style</p>
    <p id="paral"> Me too!</p>
    <p>And me!</p>


    2 id选择器
    #paral1{
    text-align: center;
    color: darkred;
    }
    <p id="paral1"> Hello World! </p>

    3 类选择器（适用于所有元素）
    .center{
    text-align: center;
    color: blue;
    }
    <h1 class="center">绿且居中 标题 </h1>
    <p class="center">绿且居中 段落 </p>

    4 类选择器（仅适用于<'p'>元素）
    p.center1{
    text-align: center;
    color: green;
    }
    <h1 class="center1">标题 不受影响</h1>
    <p class="center1">段落 居中变蓝</p>


    5 引用两个类的HTML元素
    p.center2{
    text-align: center;
    color: orange;
    }
    p.large{
    font-size: 300%;
    }
    <h1 class="center2">标题不受影响</h1>
    <p class="center2">段落居中变橙色</p>
    <p class="center2 large">段落居中变橙色且字体变大</p>

    6 通用选择器 //通用注释了，要不都染了
    *{
    text-align: center;
    color: black;
    }
    <h1> Hello world! how are you ??? </h1>
    <p> 每个月元素都被染了把 </p>
    <p> 学之染人，甚于丹青 </p>

    7 分组选择器
    h1, h2, p{
    text-align: center;
    color: pink;
    font-size: 300%;
    }
    <h1> 还好吗？ </h1>
    <h2> 嗯 </h2>
    <p> 那就好 </p>

    权重优先等级:important>内联选择器（style) > id选择器 >类选择器 > 标签选择器 >通配符选择器
    值为:
    style       1000
    id            100
    class       10
    标签        1
    通配符     0
</body>
<script src="./scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</html>

 

posted @ 2021-09-12 14:45  learnacode  阅读(67)  评论(0)    收藏  举报