CSS學習筆記十一 組合選擇符和偽類偽元素

2021-09-26 09:12:53 字數 1322 閱讀 2250

組合選擇符說明了兩個選擇器之間的關係

組合方式:

也就是它的子子孫孫

div p

只有兒子女兒才是第一繼承人

div>p

也就是住在隔壁的老王

div+p   

街上鄰居等等各種人

div~p

例項:

在div元素裡,我是它的兒子,所以我是藍色

而我是孫子,我該是紅色

我不是它的後代,是相鄰兄弟,所以我是綠色

我不是它的後代,是後續兄弟1號,所以我是黃色

我不是它的後代,是後續兄弟2號,所以我是黃色

結果:

css偽類是用來新增一些選擇器的特殊效果。

之前已經學習過,【css學習筆記四】字型和鏈結裡的鏈結的樣式就是乙個偽類

:first-line 偽元素

用於向文字的首行設定特殊樣式

p:first-line

注意:「first-line」 偽元素只能用於塊級元素。

:first-letter 偽元素

用於向文字的首字母設定特殊樣式

p:first-letter

:before" 偽元素

用於在元素的內容前面插入新內容,可以是,文字。

p:before

:after" 偽元素

用於在元素的內容後面插入新內容,可以是,文字。

p:after

例項:

我是第一行,紅色

我是第二行,原樣,所以效果就是這樣子的

結果:

CSS 組合選擇符

組合選擇符 組合選擇符說明了兩個選擇器直接的關係。css組合選擇符包括各種簡單選擇符的組合方式。在 css3 中包含了四種組合方式 後代選取器匹配所有值得元素的後代元素。以下例項選取所有 元素插入到 元素中 段落 1。在 div 中。段落 2。在 div 中。段落 3。不在 div 中。段落 4。不...

CSS 組合選擇符

css 組合選擇符 note 組合選擇符說明了兩個選擇器直接的關係。css組合選擇符包括各種簡單選擇符的組合方式。在 css3 中包含了四種組合方式 後代選擇器 以空格 分隔 子元素選擇器 以大於 號分隔 相鄰兄弟選擇器 以加號 分隔 普通兄弟選擇器 以波浪號 分隔 後代選擇器 後代選擇器用於選取某...

CSS 組合選擇符

css 組合選擇符 css組合選擇符包括各種簡單選擇符的組合方式。在 css3 中包含了四種組合方式 doctype html html head meta charset utf 8 title 1 title style div p style head body div p 段落 1。在 di...