CSS常見的選擇器及其權重大小

2021-10-11 23:33:54 字數 2084 閱讀 3577

css需要借助選擇器來實現對html框架中元素的精準定位,實現元素樣式的編輯,由於需求不同css衍生出了十餘種不同型別的選擇器,它們的權重與功能各不相同:

選擇器型別及權重:

選擇器 權重

標籤選擇器/* 0001

class類選擇器 0010

屬性選擇器 0010

偽類選擇器 0010

偽元素選擇器 0010

id選擇器 00100

行內樣式 1000

多個選擇器 選擇器權重之和

一、標籤選擇器(元素選擇器):從html標籤元素中直接選取,直接對框架內某個標籤進行選擇編輯,例如

二、類選擇器:類選擇器是可供編譯者通過 class屬性設定的選擇器

例 三、

id選擇器:在html標籤中通過 id 屬性設定的選擇器,id 選擇器在css中的引用通過 # 實現

例 tips:

1.同一文件中,id名必須唯一

2.id選擇器的權重大於class

四、全域性選擇器(萬用字元選擇器):*,選取文件中所有的元素

五、群組選擇器:多個選擇器需要使用同乙個css樣式時,可將它們用「,」連線在一起

例span,a

六、偽類選擇器:

a:hover{}-----------設定元素a被滑鼠懸停時的樣式

a:link{}————–設定元素a超連結的預設樣式

a:visited{}------------設定元素a超連結被訪問後的樣式

:active{}-----------設定元素被啟用時的樣式

:focus--------------設定元素獲得輸入焦點的樣式

七、後代選擇器:選擇某個元素的所有後代元素,選擇器間用「 」隔開

例:div p{}

八、子選擇器:用於選擇某一元素的子元素,選擇器間用》隔開

例:div>p{}

九、屬性選擇器:通過元素的屬性或屬性值來獲取元素

a.[屬性名] 選取具有某個屬性的所有元素

例:b.匹配元素[屬性名] 選取具有某個屬性且匹配前面的「匹配元素」的所有元素

c.[屬性名1][屬性名2] 選取具有多個屬性的所有元素

e.[屬性名=「屬性值」] 選取具有某個屬性且具有指定屬性值的所有元素

f.[屬性名~=「屬性值1 屬性值2 屬性值3…」] 選取具有某個屬性且包含 某個屬性值的所有元素

g.[屬性名l=「屬性值」] 選取具有某個屬性,且其屬性值以某些字串作為字首,或屬性值為該字串,如

測試1測試2

[title|=「a」]{},會選取到測試1和測試2

h.[屬性名^=「字串」] 選取具有某個屬性,且屬性值以某些字元開頭的所有元素

i.[屬性名$=「字串」] 選取具有某個屬性,且屬性值以某些字串做結尾的所有元素

j.[屬性名*=「字串」] 選取具有某個屬性,且屬性值中包含指定字串的所有元素

十、結構偽類選擇器:用於選擇乙個結構中的某個元素

例::first-child 選取結構中第乙個元素

父元素 :first-child 選取某個結構中的第乙個元素

父元素 匹配物件:first-child 選取某個機構中的第乙個元素,且這個元素必須和匹配物件向匹配

:last-child 選取結構中最後乙個元素

:nth-child(n) 選取結構中第n個元素

:nth-last-child(n) 選取結構中倒數第n個元素

元素型別:nth-of-type(n) 按類別查詢結構中的第n個元素

元素型別:nth-last-of-type(n) 按型別在結構中查詢倒數第n個元素

元素型別:first-of-type 按型別查詢結構中第乙個符合某種型別的元素

元素型別:last-of-type 按型別查詢結構中最後乙個符合某種型別的元素

十一、偽元素選擇器:常用的為元素選擇器為::before / ::after

::before 在乙個元素前面插入相應內容,常和content結合使用

::after{

content:"" 在乙個元素後面插入內容,常和content結合使用

樣式中必須要有content屬性,但不一定需要賦值

以上就是常用的選擇器,及使用方式。

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

一 以下為單選擇器 行內樣式 權重 1000 important 權重無限大 ie6不支援 1,標籤 元素 選擇器 權重 的大小按著256進製計算 並不是10比1大9的 關係div p span 權重 1 div2 id 選擇器 權重 100 idname 3 類 類別 選擇器 calssname ...

css選擇器 權重

基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫,建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深,一定能夠被選上 3 選擇頁面所有的,而不是具體某乙個 標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...

CSS選擇器權重問題

原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...