1.標簽選擇器
eg:
div {color : red;}
2.類選擇器
eg:
<div class='box eg'></div>
.box{color : red;}
.box.eg{color : red;} // 同時滿足兩項
3.ID選擇器
eg:
<div id="div1">
</div> #div1{color : red;} // 同一文檔中，元素id必須保證唯一性(雖然不會報錯)
4.屬性選擇器
4.1 [class]{color : red;} 應用于所有含class屬性的元素，不管屬性的值
4.2 [class='box']{color : red;} 應用于name屬性的值為box(值必須完全匹配)的元素 class="box eg"則不會應用該樣式 [class='boxeg']也不會，因為值必須完全匹配。
4.3 [class~='box']{color:red;} 只要class屬性的值包含box就可以，不需要完全匹配。
4.4 [class^='box'] {color : red;} class屬性的值必須以box開頭才能應用該樣式。
4.5 [class$='box']{color :red;}class屬性的值必須以box結尾
4.6 [class*='box']{color :red;} 只要class屬性的值包含box子串
5.后代選擇器
div span{color : red;}所有是div后代的span，不管嵌套的又多深
6.孩子選擇器
div > span{color :red;} 只選擇是div的第一代孩子的span。
7.相鄰兄弟選擇器
div+span{color :red}；和div在同一層級，且鄰接在div的后面的span
偽類和偽元素
偽類：
a:link 用于沒有訪問的超鏈接(必須是有href熟悉的)
eg: <a >1</a> a:link{color:red;}不會對這個a標簽起作用
a:visited 已經訪問了的超鏈接
a:active 元素被激活時,例如點擊等
:hover 鼠標懸浮在元素上時，可以作用在任意元素上
：focus 元素獲得輸入焦點時
p:first-child {color : red} 應用于作為某個元素第一個孩子的p元素，不是p的第一個元素，這和下面說的偽元素有區別。
偽元素：
p：first-letter {color ：red;} p元素的首字母顏色變為紅色
p:first-line{color:red} p元素的首行字體顏色為紅色
p:before{content : 'xxx' ;color : red} 在p元素的內容之前插入內容，content指定內容
p:after{content : 'xxx'}在p元素內容的最后插入內容。
更多偽類和偽元素參照w3school
