屬性選擇器可以根據元素特定屬性來選擇元素。這樣就可以不用借助於類或者id選擇器。
選擇符簡介
e[att]
選擇器選擇具有att屬性的e元素
e[att="val"]
選擇器選擇具有att屬性且屬性值等於val的e元素
e[att^="val"]
匹配具有att屬性且值以val開頭的e元素
e[att$="val"]
匹配具有att屬性且值以val結尾的e元素
e[att*="val"]
匹配具有att屬性且值含有val的e元素
結構為類選擇器主要根據文件結構來選擇器元素,常用於根據父級選擇器裡面的子元素。
選擇符簡介
e:first-child
匹配父元素中的第乙個子元素e
e:last-child
匹配父元素中的最後乙個子元素e
e:nth-child(n)
匹配父元素中的第n個子元素e
e:first-of-type
指定型別e的第乙個
e:last-of-type
指定型別e的最後乙個
e:nth-of-type
指定型別e的第n個
nth-child(n)與nth-of-type的區別:
nth-child(n)選擇某個父元素的乙個或者多個特定的子元素:
公式取值
2n偶數
2n+1
奇數5n
5 10 15...
n+5從第五個開始(包含第五個)到最後
-n+5
前五個(包含第五個)...
注意:類選擇器、屬性選擇器、偽類選擇器,權重為10。
偽元素選擇器可以幫助我們利用css建立新標籤元素,而不再需要html標籤,從而簡化html結構。
選擇符簡介
::befor
在元素內部的前面插入內容
::after
在元素內部的後面插入內容
注意:偽元素選擇器使用場景:
1)偽元素字型圖示效果如下圖
3) 偽元素清除浮動
CSS3 新增選擇器
新增選擇器 用法描述 element1 element2 p u選擇在同乙個父級元素下的p後面的所有的ul 選擇其 src 屬性值以 https 開頭的每個a元素 attribute value a src pdf 選擇其 src 屬性以 pdf 結尾的所有a元素 attribute value a...
css3新增選擇器
1.屬性選擇器 1 e att 元素 屬性 選擇具有att屬性的e元素,需要選擇有某個屬性的元素,而不論是行為是什麼,可以使用簡單的屬性選擇器 注 可以根據多個屬性進行選擇,只需要將屬性選擇器連線即可。2 e att val 元素 屬性 屬性值 選擇具有att屬性且屬性值為val的e元素,進一步縮小...
css3新增選擇器
屬性選擇器 1.dom attr 帶有attr的屬性會被選擇 2.dom attr value 帶有attr的屬性,並且值為value的元素會被選擇 3.dom attr value 帶有attr的屬性,並且值當中只要包含完整的value單詞,就會被選擇 4.dom attr value 帶有att...