css零到一中级教程025:CSS 特异性
生活随笔
收集整理的這篇文章主要介紹了
css零到一中级教程025:CSS 特异性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是特異性?
如果有兩條或兩條以上指向同一元素的沖突 CSS 規則,則瀏覽器將遵循一些原則來確定哪一條是最具體的,并因此勝出。
將特異性(specificity)視為得分/等級,能夠確定最終將哪些樣式聲明應用于元素。
通用選擇器(*)具有較低的特異性,而 ID 選擇器具有較高的特異性!
注意:這種特異性是 CSS 規則不適用于某些元素的常見原因,盡管您可能會認為應該適用。
特異性層次
每個選擇器在特異性層次結構中都有其位置。以下四種類別定義了選擇器的特異性級別:
行內樣式 - 行內(內聯)樣式直接附加到要設置樣式的元素。實例:<h1 style="color: #ffffff;">。
ID - ID 是頁面元素的唯一標識符,例如 #navbar。
類、屬性和偽類 - 此類別包括 .classes、[attributes] 和偽類,例如::hover、:focus 等。
元素和偽元素 - 此類別包括元素名稱和偽元素,比如 h1、div、:before 和 :after。
如何計算特異性?
請您牢記計算特異性的方法!
從 0 開始,為 style 屬性添加 1000,為每個 ID 添加 100,為每個屬性、類或偽類添加 10,為每個元素名稱或偽元素添加 1。
請思考以下三個代碼片段:
實例
實例
A: h1 B: #cont總結
以上是生活随笔為你收集整理的css零到一中级教程025:CSS 特异性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: windows 运行命令大全
- 下一篇: CSS 特异性看这篇就行了