亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.430618.com 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

CSS特異性,是一種根據點數區分不同CSS選擇器或優先級的過程,具有最高特異性點數的選擇器將獲勝,并且該選擇器的CSS樣式將應用于該元素。

每個 CSS 選擇器的點層次結構及其優先級如下表所示 –

的中文翻譯為:

Sr. No. 序號 CSS選擇器 特異性得分
1 元素選擇器 1
2 類選擇器 10
3 ID選擇器 100
4 內聯CSS 1000
5 元素+類選擇器 1 + 10 = 11
6 元素+ID選擇器 1 + 100 = 101

用例 ? 假設你有一個帶有類和ID的元素,并且你想要使用類選擇器和ID選擇器給它添加CSS樣式。在這種情況下,它將使用ID選擇器定義的CSS樣式,因為ID選擇器的特異性比類選擇器高10倍。

現在讓我們借助代碼示例詳細了解這些選擇器之間的區別及其優先級。

步驟

    步驟 1 – 在第一步中,我們將定義一個帶有類和ID屬性的HTML元素。

    第二步 – 在這一步中,我們將通過使用CSS選擇器選擇元素并檢查它們的優先級,為元素編寫CSS。

    Example

    的中文翻譯為:

    示例

    下面的示例將說明不同 CSS 選擇器之間的差異及其優先級 –

    <html>
    <head>
       <style>
          /* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
          #IdDemo {
             background-color: #84abb5;
             color: white;
             height: 150px;
             text-align: center;
          }
          .classDemo {
             background-color: green;
             color: white;
             height: 400px;
             text-align: end;
          }
          /* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
          h2.demoH2Class {
             color: #e6d4b6;
             background-color: #414141;
          }
          .demoH2Class {
             color: red;
             background-color: white;
          }
       </style>
    </head>
    <body>
    <div id = "IdDemo" class = "classDemo">
    <h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
    </div>
    </body>
    </html>
    

    登錄后復制

    在上面的示例中,我們通過在兩個不同的選擇器的幫助下選擇同一個元素,在同一個元素上使用了相同的 CSS 屬性,我們可以清楚地看到具有較高特異性點的選擇器的 CSS 應用于該元素。

    示例 2

    下面的示例將解釋更多 CSS 選擇器在其特殊點方面的差異 –

    <html>
    <head>
       <style>
          /* CSS of the main Div using and element + ID = 101 points selectors */
          div#IdDemo {
             background-color: green;
             color: blue;
             height: 250px;
             text-align: start;
          }
          /* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
          h2#demoH2ID {
             color: #e6d4b6;
             background-color: #414141;
          }
          #demoH2ID {
             color: red;
             background-color: white;
          }
       </style>
    </head>
    <body>
       <!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
       <div id = "IdDemo" class = "classDemo"
          style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
          <h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
       </div>
    </body>
    </html>
    

    登錄后復制

    在上面的例子中,我們再次使用了相同的CSS屬性,但在不同的CSS選擇器中使用了不同的值。在主div元素的情況下,我們使用了內聯和ID選擇器來應用CSS,但由于內聯選擇器的優先級遠遠高于ID選擇器,所以內聯CSS被應用到了該元素上。而在h2標題的情況下,我們使用了ID和元素+ID選擇器,后者的CSS特異性更高,因此元素+ID選擇器的CSS被應用到了該元素上。

    結論

    在本文中,我們不僅學習了CSS特異性點的計算,還詳細了解了不同CSS選擇器內部編寫的CSS的優先級與其特異性點之間的區別,并通過代碼示例進行了實際操作。我們通過同時選擇不同選擇器來為同一元素賦予不同值的CSS屬性,從而看到了CSS選擇器之間的差異。

    以上就是CSS特異性的分數是如何計算的?的詳細內容,更多請關注www.92cms.cn其它相關文章!

分享到:
標簽:CSS 分數 特異性 計算
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定