CSS中的選擇器總結

2021-09-06 07:18:15 字數 963 閱讀 6991

主要應用的選擇器就三類:元素選擇器,id選擇器,類選擇器。

選擇器的結合關係有三種:後代結合、子元素結合、相鄰兄弟結合。

元素選擇器就是以html文件中的標準元素標籤作為選擇器的標誌的。如:

h1
id選擇器,以元素的唯一id作為選擇器標誌。如:

#red#green
類選擇器,以元素的類(class)作為選擇器標誌。如:

.center
從選擇器的結合關係來看:

後代結合,就是兩個選擇器之間用空格分開。如 「a b」,表示a所選擇的元素中包含的b所選擇的元素。如:

.fancy td
上述例子,表示fancy類的元素中包含的td元素。注意:這個包含不一定是相鄰子代包含,可以是孫代包含,故名後代結合。

子元素結合,兩個選擇器之間用「>」隔開。如 「a > b」,表示a所選擇元素的相鄰子代元素中b所選擇的元素。如:

h1 > strong
上述例子,在第一句中應用了該樣式,在第二句中沒有。因為第二句中 h1 和 strong 不是相鄰子元素關係。

相鄰兄弟結合,兩個選擇器之間用 「+」 隔開。如 「a + b」,表示a和b為相鄰元素,並且有同乙個父元素,即他倆為兄弟元素。該選擇器選擇的是b元素。

this is paragraph.

this is paragraph.

上例中,第二個p元素沒有應用樣式,而第乙個應用了。

知道了選擇器種類以及選擇器的結合方式,就會創造出許多種神奇應用了。如:

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

**:

css選擇器 CSS選擇器總結

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

CSS中的選擇器總結

主要應用的選擇器就三類 元素選擇器,id選擇器,類選擇器。選擇器的結合關係有三種 後代結合 子元素結合 相鄰兄弟結合。元素選擇器就是以html文件中的標準元素標籤作為選擇器的標誌的。如 h1id選擇器,以元素的唯一id作為選擇器標誌。如 red green類選擇器,以元素的類 class 作為選擇器...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...