當(dāng)多個(gè)規(guī)則以相同的元素為目標(biāo)時(shí)，CSS中的特異性衝突發(fā)生，並且瀏覽器必須確定要應(yīng)用哪種樣式。它使用基於選擇器類(lèi)型的評(píng)分系統(tǒng)：內(nèi)聯(lián)樣式（1000），IDS（100），類(lèi)/屬性/偽級(jí)（10）以及Elements/pseudo-Elements（1）。較高的分?jǐn)?shù)覆蓋較低。當(dāng)自定義樣式損失更特定的選擇器時(shí)，例如Bootstrap或Utility-First CSS等框架中，就會(huì)出現(xiàn)常見(jiàn)問(wèn)題。為了解決衝突，您可以通過(guò)添加更精確的選擇器來(lái)提高特異性，在第三方庫(kù)之後加載自定義CSS，並使選擇器簡(jiǎn)單地加載自定義CSS。理解和管理特異性有助於防止意外的樣式覆蓋。
當(dāng)兩個(gè)或多個(gè)規(guī)則以相同的元素為目標(biāo)並嘗試以不同的方式樣式時(shí)，CSS中發(fā)生特異性戰(zhàn)鬥或特異性衝突。瀏覽器必須決定哪種規(guī)則獲勝，也就是說(shuō)，哪個(gè)是應(yīng)用的。特異性基本上是一個(gè)評(píng)分系統(tǒng)，它決定發(fā)生衝突時(shí)哪種樣式優(yōu)先。
一開(kāi)始這似乎沒(méi)什麼大不了的，但是如果您試圖覆蓋風(fēng)格並且行不通，那麼特殊性就是罪魁禍?zhǔn)住?/p>
如何計(jì)算特異性
每種選擇器類(lèi)型都為整體特異性評(píng)分貢獻(xiàn)了一定的“權(quán)重”。這是它的崩潰方式：
-
內(nèi)聯(lián)樣式（例如
style="color: red;"）的重量最高 - 它們算作1000。 - ID選擇器（
#header）添加100分。 -
類(lèi)選擇器，屬性和偽級(jí)（
.btn，[type="text"]:hover）每個(gè)添加10。 -
元素選擇器和偽元素（
div，::before）僅添加1分。
因此，如果您有類(lèi)似div#main.content東西，則其特異性為1（element）100（id）10（class）= 111。
數(shù)字越高，選擇器越具體 - 它越可能覆蓋其他規(guī)則。
特異性引起麻煩的常見(jiàn)場(chǎng)景
您可能會(huì)遇到特殊性問(wèn)題，甚至沒(méi)有意識(shí)到。以下是一些常見(jiàn)情況：
- 您編寫(xiě)一堂課以更改鏈接顏色，但是它不起作用，因?yàn)榱硪粋€(gè)具有更高特異性的規(guī)則正在超越它。
- 您使用Bootstrap之類(lèi)的CSS框架並嘗試自定義組件，只是發(fā)現(xiàn)您的樣式不粘。
- 您正在使用公用事業(yè)領(lǐng)先的CSS（例如tailwind），默認(rèn)情況下，您的自定義課程被覆蓋。
例如：
/ *如果其他地方有一個(gè)更具體的規(guī)則 */，這可能行不通 */
a {
顏色：紅色；
}如果在其他地方有這個(gè)：
＃NAV-MENU A {
顏色：藍(lán)色；
}然後， #nav-menu內(nèi)部的所有鏈接都將保持藍(lán)色 - 無(wú)論您對(duì)紅色多麼難。
如何處理特異性衝突
有幾種方法可以處理這類(lèi)衝突而不會(huì)發(fā)瘋：
-
更具體地說(shuō)：如果您需要覆蓋規(guī)則，匹配或擊敗其特異性。例如，而不是
.btn，而是使用.navbar .btn。 -
很少使用
!important它迫使風(fēng)格不論特異性如何，但是過(guò)度使用它可以使調(diào)試以後更難。 - 明智地組織您的CSS ：在第三方庫(kù)之後加載自定義樣式，以便它們可以更輕鬆地覆蓋默認(rèn)值。
- 使選擇器簡(jiǎn)單：除非絕對(duì)必要，否則避免過(guò)度複雜的選擇器 - 它使維護(hù)更加容易。
一個(gè)好的技巧是通過(guò)添加DOM中已經(jīng)存在的額外類(lèi)或ID來(lái)暫時(shí)提高選擇器的特異性 - 足以使平衡點(diǎn)亮。
特異性不必令人沮喪
一旦您了解了評(píng)分的工作原理並認(rèn)識(shí)到衝突趨於彈出的位置，那麼處理特殊性就變得不那麼神秘了。
這並不總是關(guān)於編寫(xiě)最強(qiáng)大的選擇器 - 有時(shí)只是要確保您的樣式在邏輯上且一致地結(jié)構(gòu)化。
基本上，特異性只是幕後裁判。它不想要戲劇 - 它只是想知道當(dāng)兩種樣式面對(duì)面時(shí)誰(shuí)贏了。
以上是解釋特異性戰(zhàn)鬥的概念的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
Composer 的進(jìn)階功能：別名、腳本與衝突解決
Jun 03, 2024 pm 12:37 PM
Composer提供進(jìn)階功能，包括：1.別名：定義套件便捷名稱(chēng)以便重複引用；2.腳本：安裝/更新套件時(shí)執(zhí)行自訂指令，用於建立資料庫(kù)表或編譯資源；3.衝突解決：使用優(yōu)先權(quán)規(guī)則、滿足性限制和套件別名解決多個(gè)套件對(duì)同個(gè)依賴(lài)版本的不同需求，以避免安裝衝突。
Win11安全啟動(dòng)違規(guī)衝突如何解決
Jun 29, 2023 pm 09:41 PM
Win11安全啟動(dòng)違規(guī)衝突如何解決？安全啟動(dòng)是重要的安全層，可防止非OEM簽章啟動(dòng)軟體在啟動(dòng)時(shí)運(yùn)作。近期有部分Win11用戶在電腦的使用上遇到了紅色的警告，提示安全啟動(dòng)違規(guī)，檢查無(wú)效，那麼對(duì)於這一情況應(yīng)該如何解決呢？下面我們來(lái)看看吧?！ in11安全啟動(dòng)違規(guī)衝突的解決方法 方法一：手動(dòng)開(kāi)啟 1、一般來(lái)說(shuō)，我們只需要進(jìn)入bios設(shè)置，找到security或boot選項(xiàng)，在其中就可以開(kāi)啟安全啟動(dòng)了?！ ?、但是因?yàn)椴煌碾娔X和主機(jī)板開(kāi)啟安全啟動(dòng)的方法不同，所以大家可以直接查看本站提供的教
熱鍵衝突怎麼修改還是衝突
Feb 18, 2024 pm 05:48 PM
熱鍵衝突是在電腦操作中經(jīng)常會(huì)遇到的問(wèn)題。當(dāng)我們?cè)谑褂密涹w或作業(yè)系統(tǒng)時(shí)，經(jīng)常會(huì)發(fā)現(xiàn)一些快捷鍵同時(shí)被多個(gè)功能或程式佔(zhàn)用，導(dǎo)致無(wú)法正常使用。在遇到這種情況時(shí)，我們需要採(cǎi)取適當(dāng)?shù)拇胧﹣?lái)解決衝突，以確保熱鍵的正常使用。首先，我們可以嘗試修改已經(jīng)衝突的快捷鍵。通常，作業(yè)系統(tǒng)或軟體提供了修改快捷鍵的功能，我們可以透過(guò)設(shè)定選單或選項(xiàng)來(lái)修改預(yù)設(shè)的快捷鍵設(shè)定。我們可以將其
MySQL中如何進(jìn)行資料的同時(shí)控制與衝突解決操作？
Jul 31, 2023 am 11:53 AM
MySQL中如何進(jìn)行資料的並發(fā)控制與衝突解決操作？引言：在大多數(shù)業(yè)務(wù)場(chǎng)景下，資料庫(kù)是一個(gè)核心元件。當(dāng)多個(gè)並髮使用者同時(shí)對(duì)資料庫(kù)進(jìn)行讀寫(xiě)操作時(shí)，資料庫(kù)可能會(huì)出現(xiàn)並發(fā)控制問(wèn)題和資料衝突。為解決這些問(wèn)題，MySQL提供了多種並發(fā)控制機(jī)制和衝突解決操作。一、並發(fā)控制機(jī)制：鎖定機(jī)制：MySQL中的鎖定機(jī)制用於控制資料的存取與修改。鎖機(jī)制分為共享鎖（讀鎖）和排他鎖（寫(xiě)鎖）。
GitLab的衝突解決功能及最佳實(shí)踐
Oct 20, 2023 pm 04:33 PM
GitLab的衝突解決功能及最佳實(shí)踐概述在軟體開(kāi)發(fā)過(guò)程中，版本控制系統(tǒng)起著重要的作用，它可以幫助團(tuán)隊(duì)有效率地協(xié)同工作，減少衝突和錯(cuò)誤。 GitLab作為一種流行的版本控制系統(tǒng)，在衝突解決方面提供了一些功能和最佳實(shí)踐，本文將詳細(xì)介紹這些內(nèi)容，並提供具體的程式碼範(fàn)例。衝突解決的背景衝突是在多個(gè)開(kāi)發(fā)者同時(shí)對(duì)相同的程式碼進(jìn)行修改時(shí)發(fā)生的。當(dāng)GitLab偵測(cè)到衝突時(shí)，它會(huì)提供
Git程式碼衝突解決技巧：專(zhuān)案經(jīng)驗(yàn)總結(jié)
Nov 03, 2023 am 11:54 AM
隨著軟體開(kāi)發(fā)的日益複雜化，團(tuán)隊(duì)協(xié)作成為了不可或缺的一環(huán)。在協(xié)作過(guò)程中，版本控制系統(tǒng)扮演著至關(guān)重要的角色。 Git是目前最受歡迎的版本控制工具之一。然而，在多人協(xié)作的情況下，可能會(huì)出現(xiàn)程式碼衝突的問(wèn)題。本文將介紹一些Git程式碼衝突解決技巧，幫助團(tuán)隊(duì)更好地協(xié)作開(kāi)發(fā)。一、了解Git的分支模型Git的分支模型是其最大的優(yōu)點(diǎn)之一。熟練Git的分支模型非常重要，因?yàn)檫@是多
如何在 React Query 中實(shí)現(xiàn)資料同步和衝突解決？
Sep 28, 2023 pm 03:49 PM
如何在ReactQuery中實(shí)現(xiàn)資料同步與衝突解決？ ReactQuery是一個(gè)用於資料管理和與伺服器互動(dòng)的函式庫(kù)，它提供了資料查詢、快取、資料同步等功能。在使用ReactQuery進(jìn)行資料同步時(shí)，遇到衝突是很常見(jiàn)的情況。本文將介紹如何在ReactQuery中實(shí)現(xiàn)資料同步和衝突解決，並提供具體的程式碼範(fàn)例。一、資料同步的概念和原理資料同步是指將
Git程式碼衝突解決實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)
Nov 03, 2023 pm 07:36 PM
在多人協(xié)作開(kāi)發(fā)的專(zhuān)案中，Git是一個(gè)非常重要的版本控制工具。但是在實(shí)際操作中，由於多人同時(shí)對(duì)同一個(gè)檔案進(jìn)行修改，就會(huì)產(chǎn)生程式碼衝突。解決程式碼衝突是開(kāi)發(fā)人員必須掌握的基本技能。本文將從實(shí)戰(zhàn)角度出發(fā)，總結(jié)Git程式碼衝突的解決經(jīng)驗(yàn)。避免程式碼衝突首先，我們應(yīng)該盡可能避免程式碼衝突的發(fā)生。如何做到呢？分配代碼模組。一個(gè)模組只由一個(gè)人負(fù)責(zé)維護(hù)，其他人不得修改。這
