Css選擇器總結(jié)

一．常用選擇器

1. id選擇器（#myid）
2. 類選擇器（.myclassname）
3. 標(biāo)簽選擇器（p,h2,p）
4. 相鄰選擇器（h2+p）
5. 子選擇器（ul > li）
6. 后代選擇器（li a）
7. 通配符選擇器（*）
8. 屬性選擇器（a[rel="external"]）
9. 偽類選擇器（a:hover,li:nth-child）
   二．css3屬性選擇器
   E[attr]：只使用屬性名，但沒(méi)有確定任何屬性值；
   E[attr="value"]：指定屬性名，并指定了該屬性的屬性值；
   E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開(kāi)，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”不能不寫；
   E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開(kāi)頭的；
   E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的；
   E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value；
   E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開(kāi)頭的值（比如說(shuō)zh-cn）;
   三．UI元素狀態(tài)偽類
   ":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對(duì)于HTML中的Form元素操作，最常見(jiàn)的比如我們"type="text"有enable和disabled兩種狀態(tài)，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來(lái)看兩個(gè)實(shí)例，比如說(shuō)你想將"disabled"的文本框與別的文本框區(qū)別出來(lái)，你就可以這樣應(yīng)用 ； IE6-8不支持":checked",":enabled",":disabled"這三種選擇器
   四．:nth選擇器
   :fist-child選擇某個(gè)元素的第一個(gè)子元素；
   :last-child選擇某個(gè)元素的最后一個(gè)子元素；
   :nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；
   :nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開(kāi)始算；
   :nth-of-type()選擇指定的元素；
   :nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開(kāi)始計(jì)算；
   :first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；
   :last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素；
   :only-child選擇的元素是它的父元素的唯一一個(gè)了元素；
   :only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；
   :empty選擇的元素里面沒(méi)有任何內(nèi)容。 IE6-8和FF3-瀏覽器不支持":nth-child，:nth-last-child()，：nth-of-type"選擇器 4、否定選擇器（:not） 否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來(lái)說(shuō)明這個(gè)選擇器的用法，比如你想對(duì)form中所有input加邊框，但又不想submit也起變化，此時(shí)就可以使用:not為實(shí)現(xiàn)
   五．偽元素選擇器
   CSS中的偽元素大家以前看過(guò)：:first-line,:first-letter,:before,:after;那么在CSS3中，他對(duì)偽元素進(jìn)行了一定的調(diào)整，在以前的基礎(chǔ)上增加了一個(gè)“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個(gè)“::selection”,兩個(gè)“：：”和一個(gè)“：”css3中主要用來(lái)區(qū)分偽類和偽元素，到目前來(lái)說(shuō)，這兩種方式都是被接受的，也就是說(shuō)不管使用哪種寫法所起的作用都是一樣的，只是一個(gè)書寫格式不同而以。 那么我們簡(jiǎn)單了解一下他們的作用 ::first-line選擇元素的第一行，比如說(shuō)改變每個(gè)段落的第一行文本的樣式，我們就可以使用這個(gè)。 ::before和::after這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見(jiàn)過(guò)最多的就是清除浮動(dòng)