如何覆蓋內聯樣式CSS？

Question

我已經嘗試過div [style]問題是這不是具有內聯樣式的唯一元素

HTML

<input class="button cool-button" style="float: right !important color:blue" value="Hello" name="hello">
<input class="button cool-button" style="float: right !important color:blue" value="World" name="hello">
<input class="button cool-button" style="float: right !important  color:blue" value="Submit" name="submit">

我的目標是提交按鈕

這就是我試圖在外部樣式表上改寫CSS的方式...

input.button .cool-button[style] [value="Submit"] [name="submit"] {
    float: none !important;
}

Answer 1

如果您的輸入采用內聯樣式的!important語法，則它將優先於該元素的所有CSS /樣式，因此您將無法float:none 。

<input class="button cool-button" style="float: right !important; color:blue" value="Hello" name="hello">

但是，如果您的輸入沒有!important ，則可以執行以下操作

 input.button.cool-button { float: none !important; } 

 <input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello"> <input class="button cool-button" style="float: right ; color:blue" value="World" name="hello"> <input class="button cool-button" style="float: right ; color:blue" value="Submit" name="submit"> 

並且css工作表中的float:none將覆蓋float: right內聯的float: right

Answer 2

這只是您需要添加的一步過程

Element[style].button.cool-button{
float:left !important;
}

例如基於您的情況

<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello">

創建Custom.css文件並添加以下代碼行

/*To override inline style sheet for 'Input' Element*/

input[style].button.cool-button{
float:left !important;
color:white !important;
}

完全希望它將對某人有所幫助！ 謝謝干杯伊什沃爾·卡納爾

Answer 3

使用額外的擴展名：

input.button.cool-button.right{
  float: right;
}

並將right類而不是樣式添加到輸入標簽。

但是請使用clear: right取消浮動。

Answer 4

input.button.cool-button { 
    float: none !important; 
}

我希望這有幫助