複習總結14種CSS選擇器與權重大小

2021-08-28 14:03:53 字數 774 閱讀 2988

一 以下為單選擇器

行內樣式 權重 1000

!important 權重無限大 ie6不支援

1,標籤/元素 選擇器 權重 的大小按著256進製計算 並不是10比1大9的

關係div p span … 權重 :1

div2 ,id 選擇器

權重 :100 #idname

3 ,類/類別 選擇器

.calssname 權重 :10 4, 萬用字元/通用 選擇器 * 權重 :0

5.偽類選擇器

:link :hover 權重 :10

6,偽元素選擇器

::before ::alert :first-letter 權重 :1

7,屬性選擇器

[title] 權重 :10

8,父子/後代/派生/關聯 選擇器

div h1 span

9,子集/直接子元素 選擇器

div>h1

10,結構性偽類選擇器

.box.ft:first-of-type

11,並集選擇器

#idneme.classname

12,相鄰同胞選擇器

div + p

13,群組/分組 選擇器

div,

h1,p,

ul14,ui元素狀態選擇器

一般用於表單元素

:disabled 元素不可用無法選擇

:read-only

:checked

:read-write

:selection

CSS選擇器複習

通用選擇器 選擇到所有的元素 選擇子元素 選擇到元素的直接後代 第一級子元素 相鄰兄弟選擇器 選擇到緊隨目標元素後的第乙個元素 普通兄弟選擇器 選擇到緊隨其後的所有兄弟元素 偽類選擇器 before,after在元素內容前面 後面新增內容 相當於行內元素 css3結構選擇器 nth child 選擇...

css選擇器 CSS選擇器總結

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

CSS複習1 選擇器

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。每條宣告由乙個屬性和乙個值組成。屬性 property 是您希望設定的樣式屬性 style attribute 每個屬性有乙個值。屬性和值被冒號分開。你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇...