css的選擇器

2021-09-25 01:24:37 字數 1022 閱讀 6403

css中有選擇器,我的理解是 通過選擇不同的標籤來達到,對html中的文字以及等的定製 

分類: 1.標籤選擇器

2.類選擇器

3.id選擇器

4.子選擇器與後代選擇器(包含選擇器)

5.通用選擇器

6.偽類選擇器

7.分組選擇器

標籤選擇器:     

例項:h1    

其實就是html中的標籤再加上,僅僅只能用於設定標籤的屬性,但要注意的是它會把   所有 帶有這個標籤的內容都改變成你設定的樣子;

4.           類選擇器

例項:.name

在標籤內部用class="  name  "就可以把標籤內的內容改變樣式了(name可以自己隨意設定,建議盡量有意義) 

5.           id選擇器

例項: #name

在標籤內部用id="  name  "就可以把標籤內的內容改變樣式了(name可以自己隨意設定,建議盡量有意義) 

這裡在比較下id選擇器與類選擇器: id選擇器的name只能出現一次,類選擇器的name可以出現多次

6.    子代選擇器和後代選擇器(包含選擇器)

子代選擇器:只需在以上選擇器等的name加上 「  >  標籤  」 ,就可以把用選擇器的標籤的裡面一層的「標籤」的樣式改變(注意:需要用 子代選擇器的標籤的裡面一層有「標籤」,且有幾個標籤就改變幾個)

例項:.first>span

後代選擇器:只需在以上選擇器等的name加上 「  >  標籤  」 ,且沒有子代選擇器的只能在裡面一層的限制,即無論用選擇器的標籤的內部到底第幾層才有「標籤」,都可以改變樣式;

例項: .first span

7.通用選擇器

例項:*name

這樣就會把html全都變成乙個樣式(類似於全域性變數的)

8.分組選擇器

h1,.name1,#name2,.name3 span,#name>div      

簡單說就是在不同的標籤之間加個   ,就可以實現一次定義多個不同型別屬性一樣的選擇器;

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