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