如何覆盖内联样式CSS？

Question

我试过div[风格] 问题是这不是唯一具有内联样式的元素

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">

我的目标是提交按钮

这就是我试图在我的外部样式 sheet...

上覆盖 css 的方式

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

Answer 1

如果您的输入在内联样式中具有 !important 语法，那么它将优先于该元素的任何 css/styles，因此您将无法 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 sheet 中的 float:none 将覆盖内联的 float: right

Answer 2

使用额外的扩展名：

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

并在输入标签中添加 right class 而不是样式。

但是使用clear: right取消浮动。

Answer 3

这只是您需要添加的一个步骤

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 4

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

希望对您有所帮助

如何覆盖内联样式CSS？

How to override Inline Style CSS?

html

css

inline-styles