CSSを使用してelement.styleをオーバーライドする

ページビルダーのHTMLページがあり、style属性を要素に直接挿入します。と見なされていることがわかりましたelement.style。

CSSを使用してオーバーライドしたい。要素を一致させることはできますが、オーバーライドしません。

CSSを使用してスタイルをオーバーライドするにはどうすればよいですか？

それはしばしば眉をひそめますが、あなたは技術的に使用することができます：

display: inline !important;

一般的には良い習慣ではありませんが、場合によっては必要になることもあります。<li>そもそも要素にスタイルを適用しないようにコードを編集する必要があります。

このCSSはJavaScriptも上書きします：

#demofour li[style] {
    display: inline !important;
} 

または最初の1つだけ

#demofour li[style]:first-child {
    display: inline !important;
}

element.style マークアップから来ています。

<li style="display: none;">

styleHTMLから属性を削除するだけです。

！importantを使用すると、ChangeなどのCSSを介してelement.styleがオーバーライドされます

color: #7D7D7D;

に

color: #7D7D7D !important;

それはそれをする必要があります。

もちろん、ここでは！importantトリックが決定的ですが、より具体的にターゲティングすると、オーバーライドを実際に適用するだけでなく（重み基準で！importantを支配できます）、意図しない要素をオーバーライドしないようにすることもできます。

ブラウザの開発ツールを使用して、問題のあるスタイル属性の正確な値を特定します。例えば：

"font-family: arial, helvetica, sans-serif;"

または

"display: block;"

次に、オーバーライドするセレクターのブランチを決定します。ニーズに合わせて選択肢を広げたり狭めたりできます。例：

p span

または

section.article-into.clearfix p span

最後に、custom.cssで、[attribute ^ = value]セレクターと！important宣言を使用します。

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

文字列と明確に一致するのに十分なだけ、スタイル属性値全体を引用する必要はないことに注意してください。

私の知識によると、インラインスタイルが最初に来るので、cssクラスは機能しないはずです。

Jqueryを次のように使用します

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

JavaScriptを使用します。

例えば：

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

要素スタイルの問題のあるプロパティを参照することで、cssのスタイルをオーバーライドできます。私の場合、これら2つのコードは15pxに設定されており、背景画像が黒くなります。だから、私はそれらを0pxでオーバーライドし、！importantを配置したので、それが優先されます

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}