CSS選擇器,選擇器的優先級


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屬性。
  • 樣式相同的誰在下面執行誰(樣式的覆蓋)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM