• 全美商學院
    新聞
    新聞

    成都小程序設計告訴您什么是CSS特異性及其工作原理?

    2023
    01/28
    22:46
    全美網絡官網
    分享

    假設您正在與成都小程序設計合作建設一個網站并希望所有超鏈接都是橙色的,以便從頁面上的其他文本中脫穎而出。此外,對于內部鏈接,您不僅要更改字體顏色——您還想將它們加粗以額外強調。

    網站設計

    為此,您需要添加針對所有鏈接元素和專門包含您的網站名稱的鏈接元素(這些是您的內部鏈接)的CSS選擇器。但是,當您預覽站點的前端時,您看不到內部鏈接的正確格式。這是怎么回事?

    您可能違反了CSS特異性規則之一,因此將不得不回溯您的代碼以嘗試修復錯誤。這很痛苦,但很常見。CSS特異性是在CSS和Bootstrap等框架中學習的最困難但最重要的概念之一。

    什么是CSS的特殊性?

    在CSS中,特異性是基于文檔中CSS選擇器的類型和順序的相關性度量。如果一個HTML元素或一組元素被多個CSS選擇器作為目標,CSS特異性規則會告訴 Web 瀏覽器應該應用哪些CSS聲明。

    在我們查看CSS特異性的不同規則之前,讓我們定義每種CSS選擇器的特異性級別。下面是“特異性層次結構”,它列出了從最高特異性到最低特異性的選擇器類型。

    ID 選擇器: ID 選擇器是最具體的一種選擇器。他們根據元素的ID 屬性(例如,#my-id)選擇元素。

    類選擇器、屬性選擇器和偽類選擇器:這三種選擇器類型具有相同的特異性。

    類選擇器選擇CSS類中的所有元素(例如,.my-class)。

    屬性選擇器選擇具有給定屬性的所有元素(例如,p[target])。

    偽類選擇器僅在處于特殊狀態時才選擇元素,例如已訪問或懸停(例如,button:hover)。

    類型選擇器:這些選擇器選擇所有具有給定節點名稱和語法元素(例如,div)的HTML元素。

    通用選擇器:通用選擇器 ( * ) 對特異性沒有影響。

    CSS特異性規則

    在開始編寫CSS之前,您應該了解一些CSS特性規則。

    規則 1:應用具有更高特異性的CSS選擇器。

    如果一個HTML元素被多個選擇器定位,那么瀏覽器將應用具有最高特異性的選擇器的CSS規則。

    例如,一個段落元素是 ID 選擇器和類選擇器的目標。因為ID選擇器具有更高的特異性,所以屬于ID選擇器的CSS樣式會比類選擇器更適用于元素。

    讓我們看另一個例子:假設您希望整個網站的所有按鈕都是藍色的。您將添加一個類選擇器以將按鈕類下的所有元素定義為具有藍色背景色。

    但是,如果您希望主頁上的訂閱按鈕是一個例外,以便更加醒目,您可以使用 ID 選擇器將 ID 為“主頁”的按鈕定義為橙色背景色。所有沒有 ID “homepage” 的按鈕仍將遵循類選擇器的CSS規則。

    規則 2:如果CSS選擇器具有相同的特異性,則應用文檔中的最后一條規則。

    如果多個選擇器應用于同一個HTML元素并且它們具有相同級別的特異性(例如,類選擇器和屬性選擇器),那么瀏覽器將應用樣式表中最后出現的選擇器的CSS規則。

    以上面的例子為例,假設您有兩個按鈕聲明塊,并且都使用按鈕類。第二個聲明塊將適用,因為它是文檔中的最后一個聲明塊。

    規則 3:內聯CSS具有最高的特異性。

    CSS可以用三種方式編寫:內聯、在HTML文檔中的

    總的來說,成都小程序設計使用CSS特異性決定哪個CSS規則應該被應用到元素上的關鍵因素。理解這個概念對于編寫有效的CSS代碼非常重要。

    聯系我們
    歡迎來到全美,免費
    獲取專業小程序設計方案
    電話咨詢:

    15281067168

    您還可以預約資深顧問
    隱私信息保護中,請放心填寫

    在線客服

    電話咨詢

    微信咨詢

    微信號復制成功
    15281067168 (蘇女士)
    打開微信,粘貼添加好友,免費詢價吧
  • 成人国产网站v片免费观看