因此，在我的應用程式中，我有以下從我的 React 應用程式生成的 HTML，它使用來自 3rd 方庫的組件：
<button class="bulk-action" disabled>
<span class="bulk-action-icon">some icon here</span>
Some text here
</button>
我正在嘗試配置它，span以便在按鈕懸停時它不會改變顏色。我需要覆寫來自此第 3 方庫的默認 CSS，并且當按鈕懸停在圖示上時，該默認 CSS 當前正在應用于圖示。當button滑鼠懸停在上方時，圖示會改變顏色，并且 CSS（在 Chrome 中檢查時）如下所示（全部來自提供組件的 3rd 方庫）：
.gmRHND .sc-ifAKCX:hover .sc-bwzfXH {
color: red; // this is applied
}
.gmRHND .sc-bwzfXH {
color: blue; // strikethrough in chrome, being overridden
}
然而，即使我應用我自己的 CSS 如下所示，洗掉線仍然適用
.bulk-action:disabled:hover .bulk-action-icon {
color: initial; // `unset` also doesn't work
}
所以，我需要在沒有在上面的 CSS 中blue特別宣告的情況下應用。color: blue我錯過了什么嗎？有任何想法嗎？
注意：為了簡單起見，我已經替換了實際使用的顏色red代碼blue
uj5u.com熱心網友回復：
一個簡單的 !important 關鍵字可能會解決您的問題
.gmRHND .sc-bwzfXH {
color: blue; !important
}
通常，第三方代碼不使用 !important 關鍵字來讓您對自己的代碼有更多的控制權，即使在使用他們的代碼時也是如此。如果這不起作用，你可以試試這個：
<div class="sc-bwzfXH">
<div class="new-class">
your text
</div>
</div>
和CSS：
.new-class{
color: blue;
}
uj5u.com熱心網友回復：
類的名稱似乎是隨機的。您必須為您擁有的可控父 div 提供一個類，然后控制您的欲望元素。
例如 ：
<div className="myClass">
<ComponentFromLibrary />
</div>
然后在您的 CSS 中，您必須找到您想要的元素，例如：
.myClass ...... button >span{
//some styles
}
uj5u.com熱心網友回復：
如果您可以在樣式中添加 css 規則，則可以創建一個規則，該規則具有更大的規則特異性，該規則設定滑鼠懸停的元素的文本顏色。
在這個演示中，我展示了如何創建這樣一個更具體的規則。具體性由按此順序使用的選擇器數量給出：!important,inline,id,class,type。現在我不希望這會非常清楚，但認為它是關于如何應用規則的淺顯暗示。
無論如何，對于給定的樣式屬性，!important無論該規則的特殊性如何，它都應該覆寫該值。當然，如果使用太多規則，可能會出現沖突!important。
.specific-class-with-rules-already-inplace {
background: blue;
color: white;
padding: 2px 5px;
cursor: pointer;
}
.specific-class-with-rules-already-inplace:hover {
color: red;
}
/*
here you are overriding the hover behaviour with a rule having more specificity
you could force higher specificity using !important after the style attribute value
but it's unneeded here
*/
.bulk-action .bulk-action-icon:hover {
color: unset;
}<div class="bulk-action">
<span class="bulk-action-icon specific-class-with-rules-already-inplace">Overrides</span>
</div>
<br/>
<span
class="specific-class-with-rules-already-inplace">
Element not overriding the rule
</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467523.html
上一篇：案例類的去重串列