CSS選擇器
CSS基本語法
- 選擇器 + 聲明塊
- 選擇器 - 通過CSS選擇器選中頁面中的指定元素,下面會重點寫。
- 聲明塊 - 選擇器后面跟着的是聲明塊,使用{}括起來,由一個個聲明組成,聲明由名值對組成,每一個聲明使用;結尾。
常用選擇器
1.元素選擇器
語法:標簽名{}
eg:p{} //為所有的p元素設置樣式。
2.ID選擇器
語法:#id{} //id值唯一,不能重復
ed: #box{} //為id為box的元素設置樣式。
3.類選擇器
語法:.class{}
eg: .box{} //為所有的class值為box的元素設置樣式。
4.分組選擇器(也叫並集選擇器)
語法:選擇器1,選擇器2,選擇器N{}
eg: #box1,.box2,p{} //為為id為box1,class為box2和p的元素共同設置樣式。
5.交集選擇器
語法:選擇器1選擇器2選擇器3{}
eg:p.box1{} //為class值為box1的p元素設置樣式,注意id為唯一值,一般id選擇器不會存在於交集選擇器中(沒必要)。
6.后代選擇器
語法:選擇器1 選擇器2{}
eg:p .box{} //選中指定祖先元素p的指定后代.box。
7.子元素選擇器
語法:父元素>子元素{}
eg:p>.box{} //選中制定父元素p的制定子元素。box。注意與后代元素選擇器的區別
8.偽類選擇器
- 偽類可以用來表示一些特殊的狀態:
:link - 未訪問過的超鏈接。
:visited - 已訪問過的超鏈接。
:hover - 鼠標移入的元素。
:active - 正在點擊的元素。
由於選擇器優先級的問題,給超鏈接a設置偽類時,需要注意他們的順序,一般的順序是:
love hate 記作(愛與恨),方便記憶
:link>:visited>:hover>:active
選擇器的優先級
為同一個元素設置多個樣式時,此時哪個樣式生效由選擇器的優先級確定:
- 選擇器的優先級(權重):
· | 內聯樣式 | id選擇器 | 類和偽類選擇器 | 元素選擇器 | 統配選擇器 | 繼承的樣式 |
---|---|---|---|---|---|---|
優先級 | 1000 | 100 | 10 | 1 | 0 | 無 |
- 當一個選擇器中含有多個選擇器時,需要將所有的選擇器的優先級進行相加,然后再進行比較,優先級高的優先顯示,選擇器的計算不會超過其最大的數量級(10個id選擇器的優先級不能達到1000)
分組選擇器(並集選擇器)的優先級單獨計算,不會相加。 - 樣式后面加!important,該樣式獲取最高優先級,內聯樣式不能加!important屬性。
- 樣式相同的誰在下面執行誰(樣式的覆蓋)。