Css選擇器總結

一．常用選擇器

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