CSS單標簽實現轉轉logo
轉轉品牌升級后更新了全新的Logo，今天我們用純CSS來實現轉轉的新Logo，為了有一定的挑戰性，這里我們只使用一個標簽實現，將最大化的使用CSS能力完成Logo的繪制與動畫效果。新logo
CSS 選擇器的權重（特異性）是確定在多個選擇器應用于同一元素時，哪個選擇器的樣式會最終生效的關鍵因素。然而，關于 CSS 選擇器特異性的理解，常常存在一些常見的誤解。本文將探討這些誤解，并幫助大家理解 CSS 選擇器的權重。
CSS 選擇器的權重并不是一些數字。所以，計算元素的權重時，并不是簡單的將權重數值相加就可以了。
CSS 選擇器的權重由三個部分組成，表示為 (a, b, c)，其中 a、b、c 分別代表了不同選擇器類型的權重。具體規則如下：
注意：通配符選擇器（如 *）、子選擇器（如 >）、相鄰兄弟選擇器（如 +）和兄弟選擇器（如 ~）對權重沒有貢獻，即它們的權重為 (0,0,0)。
權重計算規則：
例如：
/* 權重為 (0,0,1) */ div { color: red; } /* 權重為 (0,1,0) */ .class1 { color: green; } /* 權重為（1,0,0） */ #id1 { color: blue; } /* 權重為（1,1,0）（因為 ID 選擇器的權重高于類選擇器）*/ #id1.class1 { color: purple; } /* 權重為（0,1,0），因為只有一個類選擇器 */ .class1 { color: red; } /* 權重為（0,1,0），即使有兩個類選擇器，但它們的權重不會相加 */ .class1.class2 { color: blue; } /* 權重為（1,1,0），因為一個ID選擇器和一個類選擇器的組合 */ #id1.class1 { color: green; } /* 權重為（0,1,0），因為有三個類選擇器，但每個類選擇器的權重仍然是（0,1,0） */ .class1.class2.class3 { color: purple; }在上面的例子中，即使選擇器中包含多個相同的組成部分（如類選擇器），每個組成部分的權重仍然是獨立的，并且不會累加。因此，在選擇器沖突時，特異性更高的選擇器將覆蓋特異性較低的選擇器。如果特異性相同，則后出現的規則會覆蓋先出現的規則（即“后來者居上”的原則）。
詳細來看看最后一個例子：
對于選擇器 .class1.class2.class3，其特異性（權重）的計算方式如下：
- 該選擇器包含三個類選擇器（.class1、.class2 和 .class3）。
- 在CSS特異性計算中，每個類選擇器都貢獻（0,1,0）的特異性值。
- 由于特異性值不會跨類型累加，我們只需關注類選擇器這一位（即第三位）上的數量。
- 在這個例子中，有三個類選擇器，但每個類選擇器在類選擇器這一位上的值仍然是 1。
但是，這并不意味著三個類選擇器加起來就是 3。實際上，在選擇器的特異性計算中，我們不會將類選擇器這一位上的值相加。我們只需記錄存在多少個類選擇器（在這個例子中是三個）。然而，在描述特異性時，我們通常（0,3,0）不直接寫出這樣的表示法，因為按照標準的特異性表示法，我們只需指出在類選擇器這一位上有三個單位（即 0,1,0 出現了三次）。
但是，為了明確和避免混淆，當我們談論這種由多個同類選擇器組成的選擇器的特異性時，我們可能會說它在類選擇器這一位上的特異性“權重”相當于（0,3,0）（盡管這不是標準的表示法）。不過，在比較選擇器的特異性時，我們只需記住它在類選擇器這一位上有三個單位。
因此，.class1.class2.class3 的特異性（權重）按照標準的表示法是 (0,1,0)（但因為有三個類選擇器，所以在類選擇器這一位上的“等效權重”可以理解為三個單位）。
很多人認為，在 HTML 元素上直接使用style屬性來定義 CSS 樣式會增加樣式權重。
在 HTML 元素上直接使用style屬性并不會增加元素的特異性。實際上，style 屬性定義的樣式具有最高的優先級，這通常被稱為“內聯樣式”或“行內樣式”。但這種高優先級并非來源于特異性的計算，而是源于CSS層疊和沖突解決機制中的一個特殊規則。
CSS層疊的優先級規則中，style屬性（內聯樣式）的優先級高于其他任何在樣式表中定義的樣式規則，無論這些樣式規則使用了何種選擇器（ID、類、元素等）。但請注意，這種優先級與特異性是兩個不同的概念。
內聯樣式
作者的樣式表
重要的作者樣式
普通的作者樣式
用戶代理樣式（User Agent Stylesheet）：瀏覽器的默認樣式，如默認字體大小、顏色等。
用戶樣式（User Styles）：通過瀏覽器設置或擴展自定義的樣式。
作者樣式（Author Styles）：在樣式表中定義的樣式。
在作者定義的樣式中，內聯樣式具有最高的優先級，即使其他樣式規則具有更高的特異性。但請注意，這并不意味著內聯樣式具有更高的特異性；它只是在優先級上高于其他樣式。因此，style屬性并不會增加元素的權重。
我們知道，在 CSS 中使用 !important 會使得樣式的優先級最高。不過，在 CSS 聲明中使用 !important 并不會增加其特異性。
特異性（權重）是一個由選擇器類型決定的權重系統，用于確定在多個樣式規則應用于同一元素時，哪個規則會被優先應用。而!important則是一個覆蓋機制，用于改變聲明的優先級，使其在CSS的層疊順序中具有更高的權重。
當瀏覽器需要確定一個元素的最終樣式時，它會按照以下步驟進行：
因此，!important并不改變特異性，而是在特異性比較之后，作為一個額外的優先級判斷依據。使用!important應該謹慎，因為它會破壞CSS的層疊和特異性規則，使得樣式更難于維護和調試。在可能的情況下，最好通過優化選擇器和組織樣式規則來避免使用!important。
本文鏈接：http://www.www897cc.com/showinfo-26-87262-0.html關于 CSS 選擇器權重，99% 的人都理解錯了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 如何用Python實現網紅兒童計算器游戲
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號