web-dev-qa-db-ja.com

CSS要素スタイルをインラインで（JavaScriptなしで）削除するにはどうすればよいですか？

このように、スタイルシートファイルの特定のHTML要素にスタイルが割り当てられています


label {
  width: 200px;
  color: red; 
}

ある特別なケースでは、HTMLドキュメントでlabel要素を使用したいのですが、label要素に指定されたスタイルを無視します（ドキュメント内の1つのインスタンスのみ）。一般的な方法でこれを実現する方法はありますか要素スタイルの属性をインラインスタイルでオーバーライドすることなく？


<label for="status">Open</label>

繰り返しになりますが、ラベルを表示するHTMLコードには、要素スタイル（幅200ピクセル、色は赤）が適用されます。デフォルトのスタイル属性を（それらが何であるかを知らずに）使用し、要素スタイル設定で具体的に何が指定されているかを知る必要がないようにしたいと思います。

htmlcssinheritanceoverriding
13
simon

Mozilla開発者センター から：

CSSは「default」キーワードを提供しないため、プロパティのデフォルト値を復元する唯一の方法は、そのプロパティを明示的に再宣言することです。

したがって、セレクター（たとえば、pなどのタグ名によるセレクター）を使用してスタイルルールを作成する場合は、特に注意が必要です。元のデフォルトは、より具体的なルール（idまたはクラスセレクターを使用するルールなど）でオーバーライドする必要があります。値を自動的に復元することはできません。

CSSはカスケードの性質があるため、スタイル設定を意図していないスタイル要素を防ぐために、スタイルルールをできるだけ具体的に定義することをお勧めします。

17
ЯegDwight
  <label ... style = "width: auto; color: inherit" />
6
Sophie88
<label ... class="default">...</label>


label {
  width: 200px;
  color: red; 
}

label.default {
  width: auto;
  color: inherit; 
}

ただし、それでは望ましい結果が得られない場合があります。別の方法は、他のすべてのラベルに特定のクラスを与えてから、そのクラスを「デフォルト」ラベルに割り当てないことです。

2
prodigitalson

状況は6年間で多少変化しました。現在、 initial 、 nset 、または revert を使用して、JavaScriptを使用せずに設定されたCSSプロパティを削除できます。 =キーワード。これらはすべての最新のブラウザでサポートされています。

2
simon

スタイルシートのラベル定義の前の状態にリセットすることはできないと思いますが、ラベルにIDを指定して、スタイルシートでオーバーライドすることはできます。

<label for="status" id="status-label">Open</label>

label {
  width: 200px;
  color: red; 
}

label#status-label {
  width: auto;
  color: blue; 
}
1
Tom

：notセレクター ：を使用できます

label:not([for="status"]) {
  width: 200px;
  color: red; 
}

サポートは2009年頃にさかのぼると思われます（ FF3.5 ）

0
user193130