元素選擇器

標籤名{
       屬性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>