CSS選擇器的閱讀方式

最近在學css選擇器的部分：

元素選擇器器

類選擇器

id選擇器

屬性選擇器

後代選擇器

子元素選擇器

相鄰兄弟選擇器

真的是蠻多的了，記錄下點自己覺得重要的東西。

eg1.

在後代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為「... 在 ... 找到」、「... 作為 ... 的一部分」、「... 作為 ... 的後代」，但是要求必須從右向左讀選擇器。

因此，h1 em 選擇器可以解釋為 「作為 h1 元素後代的任何 em 元素」。如果要從左向右讀選擇器，可以換成以下說法：「包含 em 的所有 h1 會把以下樣式應用到該 em」。

eg2.

h1 + p

這個選擇器讀作：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。所以這個選擇器的作用物件也就是最右邊開始的p。

eg1.

html > body table + ul

這個選擇器解釋為：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在乙個 body 元素中，body 元素本身是 html 元素的子元素。

eg2.

table.company td > p

eg3同樣偽類中也應該從右向左讀：

個人感覺這邊有點像c#中依賴屬性的意思。

css選擇器 CSS選擇器總結

在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...

CSS使用方式及選擇器

內嵌樣式 寫在style標籤對裡面。行內樣式 直接寫在標籤行上面。外鏈樣式 單獨寫乙個css檔案，通過link標籤引入。匯入式 單獨寫乙個css檔案，通過 import匯入。css的基礎選擇器主要有三個 標籤選擇器 類選擇器 和 id選擇器 後代選擇器是對某元素所巢狀的指定元素進行選擇，每個選擇符之...

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...