html5學堂：我們學過了最為基礎的id，類名和標籤名選擇器，然後就一直用它們了嗎？如果是這樣，那會丟失掉css選擇器強大的功能。我們會花費幾篇文章的篇幅，將css1.0版本至當前最新的3.0版本當中，存在的所有選擇器講解一遍，今天我們先來說說比較基礎的選擇器。**
對於初學者，在學習更多高階選擇器之前，最先了解的選擇器。
星號選擇器將匹配頁面裡的每乙個元素。很多開發者使用這個技巧將外邊距和內邊距重置為零。雖然在快速測試時這確實很好用，但建議永遠不要使用它，它會給瀏覽器帶來大量不必要的負擔。我們通常通過reset檔案進行樣式的重置。
此外，* 也能作為子選擇符使用。
#h5course *
這將匹配#h5course的每乙個後代元素。
ie6+
firefox
chrome
safari
opera
#x#h5course
#號字首允許我們通過id選擇標籤。這是最常見的用法，不過應該慎重使用id選擇器。
id選擇符是唯一的，不允許重複使用。如果可能的話，先嘗試使用乙個標籤名稱，乙個新的html5元素，甚至是乙個偽類。
ie6+
firefox
chrome
safari
opera
.x.h5course
id和類的不同之處在於後者可以多次使用。當你想給一組元素應用樣式的時候可以使用類選擇符，當需要給特殊元素應用樣式的時候才使用id。
通常設定id，往往與js相關~
ie6+
firefox
chrome
safari
opera
xdiv
如果你想根據頁面元素的型別，而不是id或類名，匹配到頁面上的相應元素，那麼可以使用標籤名選擇器，但是很不建議單獨使用標籤名選擇器進行樣式控制，原因很簡單——選擇範圍太廣，容易對其他元素造成影響。
ie6+
firefox
chrome
safari
opera
x y.h5course div
當你需要給你的選擇符增加特殊性的時候，可以使用。例如，如果你只想匹配類名為h5course下的div元素？此時後代選擇符派上用場。
如果你的選擇符看起來像這樣 x y z a b.error，那你就錯了，並非一味的後代就是合理的~時常問問自己，是否有必要這麼做~
ie6+
firefox
chrome
safari
opera
歡迎溝通交流~html5學堂
x:visited and x:link
a:link
a:hover
比較經典的偽類選擇器有四種，分別是hover、link、active、visited。最初偽類選擇器只能應用於a標籤，從ie7之後，其他瀏覽器也支援其他標籤的偽類效果了。可以把偽類理解為一種標籤的狀態。如，a:hover表示的就是當滑鼠懸停在a標籤上時的效果。
ie7+
firefox
chrome
safari
opera
x + y
ul + .h5course
只選擇緊貼在x元素之後y元素。上面的例子，僅每乙個ul之後的第乙個類名為h5course元素的文字為紅色。
ie7+
firefox
chrome
safari
opera
x > y
#h5course > p
x y和x > y之間的不同點是後者只選擇直接子代。
選擇符#h5course > p將只選擇id為h5course的元素的直接子代p。它不匹配更深層的p元素。
ie7+
firefox
chrome
safari
opera
x ~ y
ul ~ div
與相鄰選擇符（ul + div）僅選擇前乙個選擇符後面的第乙個元素比起來，兄弟選擇符更寬泛。它會選擇，我們上面例子中更在ul後面的任何div元素。
ie7+
firefox
chrome
safari
opera
x[title]
a[title]
屬性選擇器，在我們上面的例子裡，這只會選擇有title屬性的錨標籤。沒有此屬性的錨標籤將不受影響。
ie7+
firefox
chrome
safari
opera
CSS選擇器大全（上）
div,p 元素選擇器 選擇所有 元素和所有 元素。div p 後代選擇器 選擇 元素內部的所有 元素。div p 子元素選擇器 選擇父元素為 元素的所有 元素。div p 同輩 級 元素選擇器 選擇緊接在 元素之後的所有 元素，此時的div和p元素是同一級別的，也就是所說的同輩元素 attribu...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...