CSS 選擇器舉例

2021-09-24 13:12:33 字數 1016 閱讀 3734

乙個簡單的html例子:

zhou zhou

24a girl who always wants to be better

if you want to know more about me

id選擇器:唯一性

#name:類選擇器:選中乙個或者多個

.self-assessmen標籤選擇器

div全域性選擇器

*組合選擇器

//任意選擇器

#example1, #example2 //id為example1或者example2的元素

li#example1 //li標籤內id為example1的元素

//後代選擇器,不一定是子代

#information #example3

//子代選擇器

.examples>example1

//毗鄰選擇器,僅僅是對相鄰的那個li起作用

#exanples+li

偽類選擇器

a:link		// 未訪問的鏈結 

a:visited // 已訪問的鏈結

a:hover // 滑鼠移動到鏈結上

a:active // 選定的鏈結

ul:first-child //ul的第乙個子元素 css2

#information>:first-of-type //id為information元素直接後代的同種元素的第乙個 css3

css選擇器的權重比較

單個選擇器:

!important > 內聯樣式 > id選擇器 > 類選擇器 > 標籤選擇器 > 萬用字元選擇器

越具體優先順序越高

同樣優先順序寫在後面的覆蓋寫在前面的

!important 優先順序最高,但是要少用

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...