1、類選擇器：class名 =>p.info {} //選擇class為info的所有p元素
2、id選擇器： id名 => #info {} //選擇id為info的元素 不能為多個元素同時設置相同的id
3、標簽選擇器：標簽名 => div {} //選擇所有的div
4、並列選擇器：#info，.info, p {} //同時選擇多個選擇器
5、后代選擇器：父選擇器 子/孫選擇器 或 父選擇器>子選擇器
div p {} //div內的所有p
div>p{} //div內僅鄰的子元素p不包含p元素內部的p元素
6、兄弟選擇器： div+p //選擇每個緊跟在div元素后面的第一個p元素
p~ul //選擇前面有p元素的所有ul元素
7、屬性選擇器：
[title] //選擇所有有title屬性的元素
[title=info] //選擇所有title屬性值為info的元素
[title~=info] //選擇所有title屬性值包含info的元素
[title|=info] //選擇所有title屬性值以info開頭的元素
[title^=info] //選擇所有title屬性值以info開頭的元素
[title$=info] //選擇所有title屬性值以info結尾的元素
[title$=info] //選擇所有title屬性值包含info的元素
8、偽類選擇器：不修改dom內容，通過一些特定的選擇器根據特定的狀態，特定條件來修改元素的樣式。
a{
:link => a 標簽（默認）
:hover => 鼠標放在a標簽
:active => 鼠標點a標簽
:visited => a標簽被訪問過
}
input{//表單元素
:focus => 匹配已聚焦點的表單元素
:enabled => 匹配已經啟用的表單元素（默認）
:disabled => 匹配禁用的表單元素
:checked => 匹配被選中的表單元素
}
:root =>匹配根元素即html
:not(p) =>選擇不是p的所有元素
p:empty =>選擇沒有子節點的p，包括空格
:target =>用來修改被點擊的a標簽所對應的錨點的樣式 eg：<a href="#mao1"></a> 點擊這個a
對應的<p id="mao1"></p>樣式會被修改
:lang(en) =>選擇屬性lang的值為en的元素
:first-of-type =>p:first-of-type //選擇每個父容器內的第一個p元素
:last-of-type =>p:last-of-type //選擇每個父容器內的倒數第一個p元素
:nth-of-type =>p:nth-of-type(2) //選擇每個父容器內的第二個p元素
:nth-last-of-type =>p:nth-last-of-type //選擇每個父容器內的倒數第二個p元素
:only-of-type =>p:only-of-type //選擇每個只有一個p元素的父容器內的p元素（父元素可包含多個其他元素）
:only-child =>p:only-child //選擇每個有且僅有一個p元素的父容器內的p元素
:first-child =>p:first-child//選擇每個父容器中的第一個且為p的子元素
:last-child =>p:last-child//選擇每個父容器中的最后一個且為p的子元素
:nth-child(n) =>p:nth-child(2)//選擇每個父容器中的第二個且為p的子元素
:nth-last-child(n) => p:nth-last-child(2) //選擇每個父容器中的倒數第二個且為p的子元素
9、偽元素：css3規定偽元素由兩個冒號開頭作為標示::,可能會改變dom結構，創建虛擬dom。
::before,::after //這兩個偽類會在選擇的元素的前面和后面創建虛擬dom 通常和content聯合shiyong
::first-letter,first-line //這兩個偽類只要用於改變選中元素內文本節點的第一個字母，第一行的樣式
::selection //用於修改用戶用鼠標選中的文本的樣式，僅限於color、background、cursor、outline的修改。IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。Firefox 支持替代的 ::-moz-selection