CSS的五种选择器

                                        元素选择器

格式：

标签名{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

实例：

h1{
    color: #F00;
    font-size; 50px;
}
<h1>元素选择器</h1>

                                        ID选择器

格式：

#ID{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

实例：

#demo1{
    color: #0F0;
}
<h1>ID选择器</h1>

                                        类选择器

格式：

类名{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

标签.类名{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

实例：

.myClass{
       font-size: 25px;
}
<h1 class="myClass">类选择器</h1>

                                        属性选择器

格式：

标签名[标签属性='标签属性值']{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

实例：

<style>
    input[type="text"]{
        background-color: yellow;
    }
    input[type="password"]{
        background-color: green;
    }
</style>

                                        包含选择器

格式：

父标签 后代标签{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
}

实例：

<style>
    #d1 div{
        color: red;
    }
</style>