▊屬性選擇器
根據屬性進行選擇。
e[attr]選擇具有arrt屬性的e元素
e[attr="val"]選擇具有arrt屬性且屬性值等於val的e元素
e[attr^="val"]選擇具有arrt屬性、且屬性值以val開頭的e元素
e[attr$="val"]選擇具有arrt屬性、且屬性值以val結尾的e元素
e[attr*="val"]選擇具有arrt屬性、且屬性值含有val的e元素
注：本質類似於交集選擇器類選擇器、偽類選擇器、屬性選擇器，權重為10
▊結構偽類選擇器
:first-child匹配父元素的第乙個子元素
:last-child匹配父元素的最後乙個子元素
:nth-child(n)匹配父元素的第n個子元素
:first-of-type指定型別的第乙個
:last-of-type指定型別的最後乙個
:nth-of-type(n)指定型別的第n個
注：↑ 是式子時更加巧妙：li:nth-child(2n)等價於li:nth-child(even)；li:nth-child(-n+5)就是選出前5個；li:nth-child(n+5)就是選出從第5個開始往後選；（n從0開始取）
注意下標從1開始:nth-child(n)是選擇父元素的孩子，而不管孩子的型別結構偽類選擇器也是偽類選擇器，權重為10
▊偽元素選擇器
::before在元素內部的前面插入內容
::after在元素內部的後面插入內容
注：before和after必須有content屬性before和after建立乙個元素（盒子），屬於行內元素因為在dom中看不見剛才建立的元素，不是真正意義上的元素（盒子），因此稱為偽元素雙冒號前面寫的是父級元素，before的含義是在該父級元素的子級元素前面加乙個內容（行內元素）
通常用來省去父級盒子內部的乙個沒有語義的span盒子，結構性更好
權重為1
▊使用場景
>
>
按鈕button
>
>
按鈕button
>
disabled
="disabled"
>
按鈕button
>
disabled
="disabled"
>
按鈕button
>
>
>
li>
>
li>
>
li>
>
li>
>
li>
>
li>
ul>
>
>
p>
>
span
>
>
span
>
>
span
>
div>
body
>
button[disabled]
.ul li:nth-child(3n)
div span:nth-of-type(even)
☀ 注文章案例改編自《黑馬程式設計師-web前端》
&lolisaikou
CSS3的新特性 新增選擇器
屬性選擇器可以根據元素特定屬性來選擇元素。這樣就可以不用借助於類或者id選擇器。選擇符簡介 e att 選擇器選擇具有att屬性的e元素 e att val 選擇器選擇具有att屬性且屬性值等於val的e元素 e att val 匹配具有att屬性且值以val開頭的e元素 e att val 匹配具...
CSS3 CSS3新特性 2D轉換
什麼是轉換 transform 轉換可以理解為變形，可以實現元素的移動 translate 旋轉 rotate 縮放 scale 等效果 移動 translate transform translate x,y 總寫 transform translatex n transform translat...
CSS3 新增選擇器
新增選擇器 用法描述 element1 element2 p u選擇在同乙個父級元素下的p後面的所有的ul 選擇其 src 屬性值以 https 開頭的每個a元素 attribute value a src pdf 選擇其 src 屬性以 pdf 結尾的所有a元素 attribute value a...