css的基本选择器

1.  //标签选择器

<html>
    <head>
     <title>HTML示列</title>
     <style type="text/css">
        div{
            background-color:gray;
            color:green;
        }
        p{
            background-color:yellow;
            color:black;
        }
     </style>
    </head>
    <body>
        <div style="background-color:red;color:green;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
        <p>变化之由表</p>
    </body>
</html>

————————————————————————————————————————————————————————

2. class选择器，每个HTML标签都有一个CLASS属性

<html>
    <head>
     <title>HTML示列</title>
     <style type="text/css">
    /*    div.haha{
            background-color:yellow;
            color:green;
        }
                p.haha{
            background-color:yellow;
            color:green;
        }*/
        .haha{
                background-color:orange;
        }
        
     </style>
    </head>
    <body>
        <div class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
        <p class="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</p>
        
    </body>
</html>

——————————————————————————————

3. ID选择器

<html>
    <head>
     <title>HTML示列</title>
     <style type="text/css">
    /*    div#haha{
            background-color:yellow;
            color:green;
        }
                p#haha{
            background-color:yellow;
            color:green;
        }*/
        #haha{
                background-color:orange;
        }
        
     </style>
    </head>
    <body>
        <div id="haha">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
        <p id="haha">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm。</p>
        
    </body>
</html>