0008-常用选择器-前端学习笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>

    <style>

    /*  1、为页面中的所有P元素，设置一个字体为红色
        2、元素选择器，选中页面中的所有指定元素 */
    p{color:red;}
    h1{color:blue;}
    /*  1、通过id元素可以选定某一个元素*/
    #p1{font-size:30px;}

    /*  1、类选择器，通过class属性选中一组元素
        2、可以为同一元素指定多个class属性，多个值之间用空格隔开*/
    .p2{color:green;}
    .hello{font-size:30px;}

    /*  1、为id为p1，class为p2，还有h1，同时设置一个背景颜色为黄色，通过给选择器分组实现，语法：选择器1，选择器2，选择器3。*/
    #p1,.p2, h1{background-color:yellow;}

    /*通配选择器，可以用来选中页面中的所有元素
        *语法：*{}
        *尝试给所有文本加粗
    */
    *{font-weight:700px;}

    /* 为拥有class为p3的span元素设置一个背景颜色为紫色，class为p3的p元素不受影响
        *符合选择器（交集选择器，可以选中同时满足多个选择器的元素）
        *语法：选择器1选择器2选择器N{}
    */
    span.p3{background-color:purple;}

    </style>

</head>
<body>
    <h1>春晓</h1>
    <p>春眠不觉晓</p>
    <p id="p1">春眠不觉晓</p>
    <p>春眠不觉晓</p>
    <!-- 我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复 -->
    <p class="p2 hello">春眠不觉晓</p> <!-- 同时为该行指定两个class属性 -->
    <p class="p2">春眠不觉晓</p>
    <p class="p2">春眠不觉晓</p>
    <p class="p3">春眠不觉晓</p>
    <span class="p3">处处闻啼鸟</span>
    
</body>
</html>

 

 

春晓

春眠不觉晓

春眠不觉晓

春眠不觉晓

春眠不觉晓

春眠不觉晓

春眠不觉晓

春眠不觉晓

处处闻啼鸟

posted @ 2018-04-04 00:31  Karlkaijie  阅读(103)  评论(0)    收藏  举报