1、基本選擇器

2、組合選擇器

3、偽類選擇器

4、偽元素選擇器

CSS選擇器規定了CSS規則會應用到哪些元素上

1、基本選擇器

基本選擇器：通配選擇器、元素選擇器、類選擇器、ID選擇器、屬性選擇器

/* 通配選擇器、效能最低的一個CSS選擇器 */ *{}
/* 元素選擇器 */ element{}
/* 類選擇器 */ .class{}
/* ID選擇器 */ id{}
/* 屬性選擇器 */ element[attribute]{}

element[attribute="value"]{} /* 屬性值為value */
element[attribute~="value"]
 
{} /* 屬性值有多個，其中一個值為value */
element[attribute|="value"]{} /* 屬性值為value或是以value-開頭 */

/* 屬性值以value開頭 */ element[attribute^="value"]{} /* IE7+ */
/* 屬性值以value結尾 */ element[attribute$="value"]{} /* IE7+ */
/* 屬性值包含value */ element[attribute*="value"]{} /* IE7+ */

2、組合選擇器

組合選擇器：後代選擇器、子選擇器、相鄰兄弟選擇器、兄弟選擇器

/*
 
 後代選擇器 */ element element{}
/* 子選擇器 */ element > element{}
/* 相鄰兄弟選擇器 */ element + element{}
/* 兄弟選擇器 */ element ~ element{} /* IE7+ */

3、偽類選擇器

偽類允許基於未包含在文件樹中的狀態資訊來選擇元素

/* 未訪問 */ element:link{}
/* 已訪問 */ element:visited{} /* 出於隱私原因，可以使用此選擇器修改的樣式非常有限，允許使用的CSS屬性為color、background-color、border-color、outline-color 
 
*/
/* 懸停 */ element:hover{}
/* 點選 */ element:active{}
/* 輸入焦點 */ element:focus{}

/* 基於元素語言來匹配頁面元素 */ element:lang(f){}
/* 匹配不符合引數選擇器描述的元素 */ element:not(s){} /* IE9+ */
/* 匹配文件樹的根元素 */ element:root{} /* IE9+ */

element:first-child{}
element:last-child{} /* IE9+ */
element:only-child{} /* IE9+ */
element:nth-child(n){} /* IE9+ */
element:nth-last-child(n){} /* IE9+ */

element:first-of-type{} /* IE9+ */
element:last-of-type{} /* IE9+ */
element:only-of-type{} /* IE9+ */
element:nth-of-type(n){} /* IE9+ */
element:nth-last-of-type(n){} /* IE9+ */

/* 空元素 */ element:empty{} /* IE9+ */
/* 選中狀態 */ element:checked{} /* IE9+ */
/* 可用狀態 */ element:enabled{} /* IE9+ */
/* 禁用狀態 */ element:disabled{} /* IE9+ */
/* 錨點指向的元素為目標元素，:target偽類用於選取當前啟用的目標元素 */ element:target{} /* IE9+ */

<style>
    #demo:target{ color:#f00; }
</style>

<a href="#demo">#demo</a>
<div id="demo">:target偽類使用方法</div>

<a href="https://madmurphy.github.io/takefive.css/">一個基於:target偽類的更為完善的純-CSS加亮框</a>

4、偽元素選擇器

偽元素表示所有未被包含在HTML的實體

CSS3將偽元素選擇器前面的單冒號（:）改為雙冒號（::）用以區分偽類選擇器，但以前的寫法仍然有效

/* 用於塊級元素第一行的第一個字元 */ element:first-letter{}
/* 用於塊級元素第一行的第一個字元 */ element::first-letter{} /* IE9+ */

/* 用於塊級元素第一行 */element:first-line{}
/* 用於塊級元素第一行 */element::first-line{} /* IE9+ */

element:before{}
element::before{} /* IE9+ */
element:after{}
element::after{} /* IE9+ */

element::-moz-selection{}
element::selection{} /* IE9+ */
/* 用於文件中被使用者高亮的部分，只有一小部分CSS屬性可以用於::selection選擇器：background-color、color、text-decoration、text-shadow、outline、cursor */

element::-webkit-input-placeholder{}
element::-moz-placeholder{}
element:-ms-input-placeholder{} /* IE10+ */
element::placeholder{}