親のCSSスタイルを無視する方法

Question 1

親スタイルを無視してデフォルトスタイル（なし）を使用する方法を知りたいです。例として私の特定のケースを示しますが、これは一般的な質問であると確信しています。

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

この問題を解決したくない方法：

「#elementIdselect」が設定されているスタイルシートを編集できません。モジュールはそれにアクセスできません。
できれば、style属性を使用して高さスタイルを上書きしないでください。

たとえば、firebugを使用すると、親スタイルをオフにすることができ、すべてが順調です。これが私が目指している効果です。

スタイルを設定したら、それを無効にすることはできますか、それともオーバーライドする必要がありますか？

Question 2

オーバーライドする必要があります。あなたが使用することができます：

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

必ず!importantcssスタイルでフラグを使用してください。たとえばmargin-top: 0px !important 、CSSで！importantはどういう意味ですか？

属性セレクターを使用することもできますが、それはレガシーブラウザー（IE6などを読む）ではサポートされていないため、クラス名を追加することをお勧めします。

Question 3

次のようにオーバーライドすることで、オフにすることができます。

height：auto！important;

Question 4

これは編集のためにトップにぶつかりました...答えは少し古くなっており、別のソリューションが標準に追加されたほど今日は役に立ちません。

現在、「すべて」の省略形プロパティがあります。

#elementId select.funTimes {
   all: initial;
}

これにより、すべてのcssプロパティが初期値に設定されます...初期値の一部は継承されていることに注意してください。その結果、要素でまだフォーマットが行われています。

コードを読んだり、将来レビューしたりするときに一時停止が必要になるため、レビュープロセスがエラー/バグが発生する可能性があるポイントである場合を除いて、使用しないでください。ページを編集するとき。ただし、リセットする必要のあるプロパティが多数ある場合は、明らかに「すべて」が最適です。

標準はここからオンラインです：https：//drafts.csswg.org/css-cascade/#all-shorthand

Question 5

基本的に最初のルールを逆にする別の定義をCSSスタイルシートの下に作成できます。また、上記のルールに「！important」を追加して、ルールが確実に適用されるようにすることもできます。

Question 6

これを使用する必要があります

height：auto！important;

Question 7

joomlaのWebサイトで作業しているときにも同様の状況が発生しました。

影響を受けるモジュールにクラス名を追加しました。あなたの場合：

<select name="funTimes" class="classname">

次に、cssで次の1行の変更を行いました。行を追加しました

#elementId div.classname {style to be applied !important;}

うまくいきました！

Question 8

質問を正しく理解した場合：このように使用するautoと、デフォルト設定に戻ります。CSSwidth: auto;

Question 9

CSSにとって、次のようなスタイルを追加するだけの方法があることは理にかなっています（たとえば、ページのヘッドセクションに、リンクされたスタイルシートをオーバーライドします）。

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

以前に適用したすべてのスタイルをオフにしますが、これを行う方法はありません。ページのheadセクションで、height属性をオーバーライドして、新しい値に設定する必要があります。

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

親コンテナ（通常はフレームワークコンポーネント）のcssスタイルをオーバーライドし、カスタムスタイルを強制するために、要素にcssクラスを再度適用するには、以下のタイプスクリプトを参照してください。アプリフレームワーク（angular / reactであっても、おそらくこれを行うため、親コンテナーcssが再適用され、css-class-nameで期待される効果が子要素に表示されません。this.overrideParentCssRule（childElement、 ' css-class-name '）;フレームワークが行ったことを実行します（これをdocument.readyまたはイベントハンドラーの終わりで呼び出します）：

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng tradrejoe@gmail.com

Question 11

CSSルールを元に戻すために使用できる値がたくさんあります：初期、未設定、元に戻します。W3CのCSSワーキンググループからの詳細：

https://drafts.csswg.org/css-cascade/#defaulting-keywords

これは「ドラフト」であるため、すべてが完全にサポートされているわけではありませんが、unsetとinitialはほとんどの主要なブラウザにあるため、revertのサポートは少なくなります。