CSS選擇器【記錄】

 

一、基本選擇器

二、組合選擇器

三、僞類選擇器

四、僞元素選擇器

 

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

 

一、基本選擇器

基本選擇器：通配選擇器、元素選擇器、類選擇器、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+ */

 

二、組合選擇器

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

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

 

三、僞類選擇器

僞類容許基於未包含在文檔樹中的狀態信息來選擇元素

/* 未訪問 */ 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>

 

四、僞元素選擇器

僞元素表示全部未被包含在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{}