CSS選擇符，css

CSS選擇符，css
CSS選擇符【通配選擇符】*星號選取器將匹配頁面裡的每一個元素，但我建議你永遠不要再生產代碼中使用它。它給瀏覽器帶來大量不必要的負擔。*{margin:0;padding:0;}【標籤選擇符】（也叫類型選擇符）：也就是把html標籤名作為選擇符demo: ul {}【id選擇符】：應該謹慎使用ID選取器。給所需樣式標籤自訂id名.然後在css檔案內寫上#自訂id名{CSS樣式}.注意:每個id名都必須不同.#IDname {width: 960px; margin: auto; }id選擇符是唯一的，不允許重複使用。如果可能的話，先嘗試使用一個標籤名稱，一個新的HTML5元素，甚至是一個偽類。【類選擇符】(class)自訂class名,使用方法:在css檔案內寫上.class名{css樣式}..className {border-color: blue; font-size:16px;}注意:一個標籤可以用多個class名,一個class名可以供多個標籤使用。id和class的區別id選擇符,一個id名只能用一次，不得重複。  getElementById('')class選擇符，一個class名可重複使用，比如頁面中的多個元素，都可以使用同一個樣式定義。【群組選擇符】：同時控制多個標籤。標籤名用,隔開a,p,span{}【組合選擇符】：我們還可以通過標籤名,id名,class名混搭的方式來選擇，添加樣式div .p {} 表示div標籤下的所有class為p的標籤。div,#a {}  表示id為a的標籤和所有的div標籤。【關係選擇符】：關係選擇符可分為選擇符   名稱               　　　　描述                    版本     英文名 E F    包含選擇符  選擇所有被E元素包含的F元素。 CSS1  (Descendant combinator)這個也有叫後代選取器的 E>F   子選擇符    選擇所有作為E元素的子項目F。 CSS2  (Child combinator) E+F   相鄰選擇符  選擇緊貼在E元素之後F元素。   CSS2  (Adjacent sibling combinator) E~F   兄弟選擇符  選擇E元素所有兄弟元素F。      CSS3  (General sibling combinator)【偽類選擇符】不是所有的標籤都能使用偽類選擇符,在此處我們只講a標籤的偽類選擇符

a:link {color: #FF0000; text-decoration: none}         //未訪問的連結a:visited {color: #00FF00; text-decoration: none}     //已訪問的連結a:hover {color: #FF00FF; text-decoration: underline}   //滑鼠在連結上a:active {color: #0000FF; text-decoration: underline}  //啟用連結

✪注意：以上的偽類你可以寫1個或者寫多個。但是一定要按照順序寫，否則會出問題！ 選擇符                 　　版本      　　　　描述E:link                　　CSS1     設定超連結a在未被訪問前的樣式。E:visited           　　CSS1     設定超連結a在其連結地址已被訪問過時的樣式。E:hover             　　CSS1/2  設定元素在其滑鼠移至上方時的樣式。E:active             　　CSS1/2  設定元素在被使用者啟用(在滑鼠點擊與釋放之間發生的事件)時的樣式。E:focus              　　CSS1/2  設定元素在成為輸入焦點(該元素的onfocus事件發生)時的樣式。E:lang(fr)          　　CSS2    匹配使用特殊語言的E元素。很少用E:not(s)             　　CSS3    匹配不含有s選擇符的元素E。E:root                　　CSS3    匹配E元素在文檔的根項目。常指html元素E:first-child        　　CSS2    匹配父元素的第一個子項目E。E:last-child         　　CSS3    匹配父元素的最後一個子項目E。E:only-child         　 CSS3    匹配父元素僅有的一個子項目E。E:nth-child(n)     　 CSS3     匹配父元素的第n個子項目E。E:nth-last-child(n)   CSS3    匹配父元素的倒數第n個子項目E。E:first-of-type      　  CSS3    匹配同類型中的第一個同級兄弟元素E。E:last-of-type       　  CSS3    匹配同類型中的最後一個同級兄弟元素E。E:only-of-type      　  CSS3    匹配同類型中的唯一的一個同級兄弟元素E。E:nth-of-type(n)    　CSS3    匹配同類型中的第n個同級兄弟元素E。E:nth-last-of-type(n) CSS3    匹配同類型中的倒數第n個同級兄弟元素E。E:empty              　　 CSS3    匹配沒有任何子項目（包括text節點）的元素E。E:checked            　　CSS3    匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox時)E:enabled            　　 CSS3    匹配使用者介面上處於可用狀態的元素E。E:disabled           　　 CSS3    匹配使用者介面上處于禁用狀態的元素E。E:target               　　 CSS3    匹配相關URL指向的E元素。   ★first-child 與first-of-type的區別：舉例：

<div class="test"><p>第一個子項目</p><h1>第二個子項目</h1><span>第三個子項目</span><span>第四個子項目</span></div>

文法說明：p:first-child  　　　　  匹配到的是p元素,因為p元素是div的第一個子項目；h1:first-child  　　　　匹配不到任何元素，因為在這裡h1是div的第二個子項目，而不是第一個；span:first-child  　　   匹配不到任何元素，因為在這裡兩個span元素都不是div的第一個子項目；p:first-of-type  　　　　匹配到的是p元素,因為p是div的所有為p的子項目中的第一個，事實上這裡也只有一個為p的子項目；h1:first-of-type  　　   匹配到的是h1元素，因為h1是div的所有為h1的子項目中的第一個，事實上這裡也只有一個為h1的子項目；span:first-of-type  　　匹配到的是第三個子項目span。這裡div有兩個為span的子項目，匹配到的是第一個。所以，通過以上兩個例子可以得出結論：:first-child 　　   匹配的是某父元素的第一個子項目，可以說是結構上的第一個子項目。:first-of-type 　　匹配的是某父元素下相同類型子項目中的第一個，比如 p:first-of-type，就是指所有類型為p的子項目中的第一個。這裡不再限制是第一個子項目了，只要是該類型元素的第一個就行了。✪注意：當然這些元素的範圍都是屬於同一級的，也就是同輩的。同樣類型的選取器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以這樣去理解。【屬性選擇符】選擇符         　　　　　版本   　　描述E[att]               　　CSS2  選擇具有att屬性的E元素。E[att="val"]    　　 CSS2  選擇具有att屬性且屬性值等於val的E元素。E[att~="val"] 　　 CSS2  選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素。E[att^="val"] 　　 CSS3  選擇具有att屬性且屬性值為以val開頭的字串的E元素。E[att$="val"] 　　 CSS3  選擇具有att屬性且屬性值為以val結尾的字串的E元素。E[att*="val"]  　　CSS3  選擇具有att屬性且屬性值為包含val的字串的E元素。E[att|="val"]  　　 CSS2  選擇具有att屬性且屬性值為以val開頭並用串連符"-"分隔的字串的E元素。【偽對象選擇符】選擇符                              　　　　版本     描述E:first-letter/E::first-letter  　CSS1/3  設定對象內的第一個字元的樣式。E:first-line/E::first-line       　CSS1/3  設定對象內的第一行的樣式。E:before/E::before　　　　　　CSS2/3  設定在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用E:after/E::after                 　　CSS2/3  設定在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用E::placeholder                   　   CSS3    設定物件常值預留位置的樣式。E::selection                     　　  CSS3    設定對象被選擇時的顏色。     ✪注意：CSS3的文法改成:: ,原本CSS1是: ,故還是直接用兩個冒號為妥。舉例：html：

<input type="search" placeholder="測試">

css:

input::-webkit-input-placeholder {color: green;}

 屬性過多我就不一一舉例了，你們可以看手冊或者下面一位仁兄寫的博文30個你必須記住的CSS選擇符：http://www.open-open.com/lib/view/open1429583085104.html