CSS選擇器:基礎、關係、屬性、偽類、偽對象等; 選擇器優先順序的計算:style=1000(內聯樣式表) ID=100 class=10 element=1 1. 基礎選擇器 ID>class>element>* 2. 關係選擇器 1.包含(後代)選擇器 E F E為F的外層元素 2.子選擇器 E> ...
CSS選擇器:基礎、關係、屬性、偽類、偽對象等; 選擇器優先順序的計算:style=1000(內聯樣式表) ID=100 class=10 element=1 1. 基礎選擇器 ID>class>element>* 2. 關係選擇器 1.包含(後代)選擇器 E F E為F的外層元素 2.子選擇器 E>F E為F的父級 3.相鄰選擇器 E+F 選擇與自身相鄰,且緊跟在自身後面的兄弟元素 4.兄弟選擇器 E~F 所有的符合條件的位於自身後面的兄弟元素 5. 並集選擇器 E,F 兩者不需要有什麼關係,只是同用一個樣式 6. 交集選擇器 E.F ,E#F 具有F類名或id名的E元素 3.屬性選擇器 E與[ ]中不要有空格 通過屬性來選擇,定義的時候用[] 來定義: 【註意事項:1.必須是屬性; 2. 屬性選擇器耗費資源比基本選擇器大;】 E[att] 通過屬性名來選擇 E[att="val"] 屬性名和屬性值都符合才會被選中; E[att~="val"] 其中一個class符合即被選中; E[att^="val"] 以val開頭的att屬性被選中; E[att$="val"] 以val結尾的att屬性被選中; E[att*="val"] 包含了val內容的屬性值的元素會被選中; E[att|="val"] 以val開頭,並且後面緊跟中劃線的元素被選中; [class]{ color:red ; } ----->所有具有類名的元素都為紅色; 4. 偽類 E與:中不要有空格 通過冒號:定義偽類 :root 選擇匹配文檔的根元素(每個文檔只有一個根元素) E:link 超鏈接未被點擊時的狀態(顏色、背景) E:visited 超鏈接被訪問後的狀態 E:hover 滑鼠懸停時的狀態,不限a標簽,其它元素也可以 E:active 滑鼠按下時的狀態 【測試超鏈接的幾個狀態時,可以用快捷鍵Ctrl+H:清除緩存】 E:not(s) 除去括弧裡面的選擇器的元素,其它的元素會被選中。括弧裡面可以是class選擇器也可以是id選擇器,要通過.或#來選擇,並且 不要加引號 E:first-child E需要具有父級,並且E是父級的第一個元素 E代表了要操作元素本身,並非父元素 E:last-child 同上 E:only-child 具有父元素,並且E是父元素中唯一的 E:empty 匹配完全沒有內容的E元素,空格和換行都算做內容。 E:checked 可以匹配被選中的元素, 如radio 和select 中的option <input type="radio" name="gender" checked="checked" /> <option value="0" selected="selected" >汽車</option> -------cheked實例 html結構 <form action=""> <input type="radio" name="gender" /><span>男</span> <input type="radio" name="gender"/><span>女</span> <select name="" id=""> <option value="0">汽車</option> <option value="1" selected="selected">火車</option> <option value="2">自行車</option> </select> </form> css樣式 input:checked + span{color: red;} option:checked{ color: aqua;} 5.偽對象選擇器(不存在於HTML中,不會改變文檔的結構) E與::中不要有空格 用::來定義偽元素(偽對象) E::before{ content:" "; } E::after{ content:" "; } 例:1. 16° -----> ::after 結合position:absolute; 2. 利用偽元素給文檔添加圖片 (display:block;設置大小;) 3.利用偽元素清除浮動:.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;} 4.利用偽元素繪製簡單的圖形,例如小三角等;
偽元素的用處還有很多,不再一一列舉; 【註意事項: E 只能有一個after和一個before,若有多個按最後一個顯示; 偽元素不存在於文檔流,不能被選中;】 <------學習筆記,如有錯誤,謝謝指正!------->