CSS選擇器

  1. 元素選擇器/標簽選擇器(element選擇器)
    a.、以文檔語言對象類型作為選擇器,即使用結(jié)構(gòu)中元素名稱作為選擇器。例如:body、div、p、img、em、strong、span等等;
    b、所有的頁面元素都可以作為選擇器;
    c、 如果想改變某個元素的默認樣式時,可以選擇元素選擇器;統(tǒng)一文檔某個元素效果時,可以使用類型選擇器。

  2. id選擇器
    a、在標簽內(nèi)部加入id屬性,取一個值(注意:不能以數(shù)字開頭,建議以英文字母開頭,可以包含數(shù)字、字母、下劃線和-);
    b、在css中通過#值{}進行使用 標明選中當前頁面中id屬性值為“值”的元素;
    c、id屬性值在當前頁面中必須唯一;
    d、id選擇器主要用在網(wǎng)頁的外圍結(jié)構(gòu)。

  3. class選擇器
    a、在標簽內(nèi)部加上class屬性,取一個值(注意:不能以數(shù)字開頭,建議以英文字母開頭,可以包含數(shù)字、字母、下劃線和-),也可以給class屬性多個值,值與值之間用空格隔開就行了;
    b、在css中通過.class屬性值{}進行使用,表示選中當前頁面中所有的class屬性為“值”的元素;
    c、使用場合:對某些元素進行統(tǒng)一樣式的設(shè)置就可以設(shè)置相同的class。

  4. *通配符(全局選擇器)
    a、通配符表示選中當前頁面中所有的元素;
    b、主要用于樣式的重置。

  5. 交集選擇器
    標簽選擇器與class選擇器的交集
    標簽選擇器與屬性選擇器的交集
    標簽選擇器與偽類選擇器的交集
    標簽選擇器與偽元素選擇器的交集
    書寫的注意:選擇器與選擇器之間一定要緊挨著寫,不能為空格或者其他的符號

  6. 并集選擇器(群組選擇器)
    當有多個選擇器應(yīng)用相同的樣式時,可以將選擇器用”,”分隔,合并為一組。
    語法:選擇器1,選擇器2,選擇器3{ 屬性: 屬性值; }

  7. 后代選擇器(包含選擇器)
    選擇器1和選擇器2用空格隔開,含義就是選擇器1中包含的所有選擇器2
    語法:選擇器1 選擇器2 選擇器3 選擇器4{ 屬性: 屬性值; }

  8. 子選擇器
    選擇器1和選擇器2用>連接,含義就是選擇器1中所有子一級選擇器2.
    語法:選擇器1>選擇器2>選擇器3{ 屬性: 屬性值; }

  9. 超鏈接的四種偽類樣式
    a:link{屬性:屬性值;}超鏈接的初始狀態(tài);
    a:visited{屬性:屬性值;}超鏈接被訪問后的狀態(tài);
    a:hover{屬性:屬性值;}鼠標懸停,即鼠標劃過超鏈接時的狀態(tài);
    a:active{屬性:屬性值;}超鏈接被激活時的狀態(tài),即鼠標按下時超鏈接的狀態(tài);
    (1)當這4個超鏈接偽類選擇器聯(lián)合使用時,應(yīng)注意他們的順序,正常順序為:?
    a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效;
    (2)為了簡化代碼,可以把偽類選擇符中相同的聲明提出來放在a選擇符中;
    例如:a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同,只有鼠標劃過變顏色

  10. 選擇器的權(quán)重
    css中用四位數(shù)字表示權(quán)重,權(quán)重的表達方式如:0,0,0,0
    標簽選擇器的權(quán)重為0001
    class選擇器的權(quán)重為0010
    id選擇器的權(quán)重為0100
    屬性選擇器的權(quán)重為0010
    偽類選擇器的權(quán)重為0010
    偽元素選擇器的權(quán)重為0010
    后代、子、交集選擇器的權(quán)重:為組成的選擇器的權(quán)重之和
    繼承樣式的權(quán)重為0000
    行內(nèi)樣式的權(quán)重為1000

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 其實平時用得多的選擇器無非也就是那么幾個,時間久了,許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風(fēng)閱讀 1,945評論 0 5
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說,文檔的元素就是最基本的選擇器。如果設(shè)置 H...
    饑人谷_小侯閱讀 943評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,090評論 1 92
  • class 和 id 的使用場景? class 重在樣式的復(fù)用,重普遍性。id重在劃分樣式區(qū)域,可以作為樣式表中的...
    南山碼農(nóng)閱讀 435評論 0 0
  • 1. class 和 id 的使用場景: id:id選擇器,使用#name定義(name為id名,可任意取名),使...
    石林濤閱讀 432評論 0 1

友情鏈接更多精彩內(nèi)容