CSS的選擇器

2022-08-20 15:39:14 字數 1200 閱讀 4176

1.標籤選擇器

2.類選擇器

呼叫:class="類名稱"

例子:

3.id選擇器

例子:

呼叫 《花千骨》是由慈文傳媒集團製作並發行,林玉芬

4.優先順序:id選擇器》class類選擇》標籤選擇器

5.高階選擇器:

a.層次選擇器

e f後代選擇器

e>f子選擇器

e+f相鄰兄弟選擇器

e~f通用兄弟選擇器

b.結構偽類選擇器

e:first-child 作為父元素的第乙個子元素的元素e,

e:last-child

作為父元素的最後乙個子元素的元素e,

e f:nth-child(n) 選擇父級元素e的第n個子元素f,關鍵字為even、odd

e:first-of-type選擇父元素內具有指定型別的第乙個e元素

e:last-of-child選擇父元素內具有指定型別的最後乙個e元素

e f:nth-of-type(n)選擇父元素內具有指定型別的第n個f元素

c.屬性選擇器

e[屬性attr]:選擇具有attr屬性的e元素

e[屬性attr=value]選擇具有attr屬性,並且屬性值只能為value的e元素,

e[屬性attr^=value]選擇具有attr屬性,並且屬性值包含value,以value開頭的任意字串

e[屬性attr$=value]選擇具有attr屬性,並且屬性值包含value,以value結尾的任意字串

e[屬性attr*=value]選擇具有attr屬性,並且屬性值包含value,以value可以在字串的任意位置

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 分組選擇器 選擇...

CSS選擇器 屬性選擇器

最近重新學習了css3,發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...