有萬用字元選擇器書寫格式：*+｛聲名塊｝
並集選擇器/組合選擇器 書寫格式;元素或類或id+“”+元素或類或id+“，”+元素或類或id｛宣告塊｝
列：h1，h2，h3｛color：red；｝
層次選擇器 ：
子集選擇器： 格式:父級元素名稱+”>”+子級元素名稱+{宣告塊}
例:div>p{color:red;}
後代選擇器： 格式:祖先元素名稱+空格+後代元素名稱+{宣告塊}
例:div p{color:red;}
兄第選擇器： 格式: A元素名稱+”+”+B元素名稱+{宣告塊}
例:div+P{color:red;} 注:選擇A元素後的B元素,AB之間不許有其他元素.
通用選擇器： 格式:同級元素A+”~”+同級元素B+{宣告塊}
例:div~p{color:red;} 注:表示選擇與A元素同級別的所有B元素(B的位置是在A後面)。
偽類選擇器
動態偽類選擇器未訪問 （把預設值改為黑色）；
a:link{color:black;}
滑鼠懸停
a:hover{color:pink;}
滑鼠點選時
a:active{color:green;}
點選後
a:visited{color:五顏六色;}；
注:hover是可以用於多個元素身上的,但其他三個只能用於具有點選功能的元素上。
a:focus{color:顏色;}
多用於輸入框或連結（注:IE7以前不支援:focus注；IE6以前不支援:hover :active）
以上5個的順序要求: A:link,visited,focus,hover,active
B:visited,link,focus,hover,active
結構偽類選擇器
格式:元素名稱+”:nth-child(n)”+{宣告塊} 例:section:nth-child(2){color:deeppink;}
表示選中html裡的第二個section元素,文字設定為deeppink
選中第一個 格式:元素名稱+”:first-child”+{宣告塊} 例:p:first-child{color:red;}
選中最後一個 格式:元素名稱+”:last-child”+{宣告塊} 例:p:last-child{color:red;}
選中奇數項 格式:元素名稱+”:nth-child(odd)”+{宣告塊} 例:section:nth-child(odd){color:red;}
選中偶數項 格式:元素名稱+”:nth-child(even)”+{宣告塊} 例:section:nth-child(even){color:red;}
偽元素選擇器
元素後面加內容
格式:元素名稱+”:after”+{content:”要新增的內容”;} 例:i:after{content:”姓名”;}
元素前面加內容
格式:元素名稱+”:before”+{content:”要新增的內容”;} 例:i:before{content:”姓名”;}
元素第一行新增樣式
格式:元素名稱+”:first-line”+{宣告塊} 例:p:first-line{color:red;}
元素第一個字母或第一個漢字
格式:元素名稱+”:first-letter”+{宣告塊} 例:p:first-letter{color:red;}
注:為了解決相容性,偽元素選擇器,建議打兩個冒號