样式选择器

阅读量: 151 编辑

样式选择器

css 中定义的样式名称,叫样式选择器,这个选择器的使用是在 html 标签中

三种样式选择器:

  • 标签定义的方式,直接使用标签名称定义样式

  • 类选择器,通过 .cssName 的方式定义,在 html 标签中通过 class="cssName" 来使用

  • id选择器,通过 #tagId 的方式定义,也就是标签的id属性,在 html 标签中通过 id="tagId" 来使用

一、代码实战

代码的详细解读,可以参考视频教程

文件:03.html

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

        <style type="text/css">
            /** 标签定义,影响所有div **/
            div{
                color: green;
            }
            /** .cssName定义,影响所有 class="mydiv" 的标签 **/
            .mydiv{
                color: red;
            }

            .mydiv2{
                font-size: 50px;
            }

            /** #tagId定义,影响所有 id="mysingle" 的标签 **/
            #mysingle{
                font-size: 100px;
                color: aqua;
            }

        </style>

    </head>
    <body>

        <div>我是div1</div>
        <div class="mydiv">我是div2</div>
        <div class="mydiv mydiv2">我是div3</div>
        <div id="mysingle" class="mydiv">我自己的选择器</div>
        
    </body>
</html>