前端工程師手冊 30分鐘搞清楚選擇器和權重

2021-09-14 00:22:28 字數 1287 閱讀 8735

通配選擇器(*)

id選擇器(#id)

類選擇器(.classname)

元素選擇器(tagname)

後代選擇器(a b)

子元素選擇器(a>b)

相鄰後面兄弟元素選擇器(a + b)

通用後面兄弟選擇器(a 〜 b)

群組選擇器(selector1,selector2,...)

這裡面平時不太常用的選擇器有相鄰後面兄弟選擇器通用後面兄弟選擇器

首先,很多資料上把它們叫做相鄰兄弟選擇器通用兄弟選擇器,我覺得這樣會有一定的誤導意義,

例如:`

當使用相鄰兄弟選擇器時:

.l3 + li
效果為:

可以看出相鄰兄弟選擇器只會選擇它後面的乙個兄弟元素。

當使用通用兄弟選擇器:

.l3 ~ li
效果為:

可以看出來通用兄弟選擇器會選擇它後面所有的兄弟元素

屬性選擇器中有波浪(〜)時屬性值有value時就相匹配,沒有波浪(〜)時屬性值要完全是value時才匹配

動態偽類

ui元素狀態偽類

例如 :enabled,:disabled,:checked等,這些主要是對一些表單元素操作。

比較常見的如"type="text"有enable和disabled兩種狀態,前者為可寫狀態後者為不可寫狀態。

根據樣式所在位置,對元素的影響也有關係:內聯樣式(標籤內style形式) > style標籤 > link標籤

根據選擇器的型別,id選擇器 > 類、屬性選擇器和偽類選擇器 > 元素和偽元素

一般來說我們的計算方式為,從0開始,乙個行內樣式+1000,乙個id+100,乙個屬性選擇器/class或者偽類+10,乙個元素名,或者偽元素+1

前端工程師手冊 30分鐘搞清楚選擇器和權重

通配選擇器 id選擇器 id 類選擇器 classname 元素選擇器 tagname 後代選擇器 a b 子元素選擇器 a b 相鄰後面兄弟元素選擇器 a b 通用後面兄弟選擇器 a b 群組選擇器 selector1,selector2,這裡面平時不太常用的選擇器有相鄰後面兄弟選擇器和通用後面兄...

2分鐘搞清楚UML

現在我們帶著4個簡單的問題一起來了解uml 1.什麼是uml?答 統一建模語言 unified modeling language,簡稱uml 是乙個通用的視覺化建模語言,用於對軟體進行描述 視覺化處理 構造和建立軟體系統製品的文件。它記錄了對必須構造的系統的決定和理解,可用於對系統的理解 設計 瀏...

五分鐘搞清楚MySQL事務隔離級別

好久沒碰資料庫了,只是想起自己當時在搞資料庫的時候在事務隔離級別這塊老是卡,似懂非懂的。現在想把這塊整理出來,盡量用最簡潔的語言描述出來,供新人參考。首先建立乙個表account。建立表的過程略過 由於innodb儲存引擎支援事務,所以將表的儲存引擎設定為innodb 表的結構如下 表結構 然後往表...