web-dev-qa-db-ja.com

ページのすべてのラベルに既存のCSSスタイルを適用したいのですが。どうやって？

これは以前の質問とは異なります そのページにあるすべてのボタンにCSSを適用するにはどうすればよいですか？ これは既存のスタイルであるためです。したがって、「standard_label_style」と呼ばれるスタイルがインクルードされたCSSファイルにすでに存在する場合、このページのすべてのラベルに追加する前にそのスタイルが必要であると言うにはどうすればよいですか。

class="standard_label_style"

一人一人に？そして、はい、jQueryまたはJavaScriptコードのスニペットを使用して、事後的にスタイルを適用できることを知っています。私はCSSでそれを行う方法を学ぼうとしています。

フォローアップ

この.standard_label_style、labelのような構文を使用するだけであるというコメントがいくつかありますが、残念ながらそれは私が望むものとは何もしません。これにより、standard_label_styleクラスに追加のルールとこのページ内のラベルにルールを適用できますが、このページのすべてのラベルにそのスタイルを適用できません。この例を確認するために、ここにスタイルシートとhtmlを示します。クラスのないラベルはまだ赤で表示されませんが、それが私が実現したいと思っていることです。クラスを持つものだけでなく、このページに新しいスタイルを追加せずに、ページ上のすべてのラベルに既存のクラスを適用したいのですが、既存のスタイルが唯一のスタイルである必要があります。

included.css：

.standard_label_style { color: red; }

test.html：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="included.css">
    <style>
      .standard_label_style, label { }
    </style>
  </head>
  <body>
    <label class="standard_label_style">Test Label</label><br/>
    <label>Unclassed Test Label</label>
  </body>
</html>
htmlcssstylesheet
8
John Munsch

CSSは実際にはそのようには機能しません。

すべてのラベルにスタイルを直接適用できます。

label {
    color: Lime;
}

またはすべてのラベルにクラスを適用する

.labelClass {
    color: Lime;
}

<label class="labelClass"></label>

複数のセレクターを使用することもできるため、現在のスタイルを次のように修正できます。

.labelClass, label {
    color: Lime;
}

標準のCSSではできないことは次のようなものです

label {
    .labelClass;
}

良い知らせは、CSSの負担を減らし、この種のことを正確に実行できるサーバー側ライブラリがたくさんあることです。たとえば、ネストされたルールを提供する.NETを使用している場合は dotLess を参照してください。そして基本的な継承モデル。

17
fearofawhackplanet

ページ上のすべてのラベルにスタイルを適用するには、次のCSSを使用します。

label {
/* styles... */
}

CSSに既存のスタイル（例： "standard_label_style"）がある場合は、それをすべてのラベルに適用できます。

.standard_label_style, label {
/* styles... */
}

これはサイト全体のすべてのラベルに影響するため、注意して使用してください！

8
whostolemyhat

あなたのCSSファイルに、あなたは単に置くことはできませんか？

.standard_label_style, label
{
 //styles
}
4
AllisonC

これまでで最も使用されていないCSSトリックの1つ：あなたの体にIDまたはクラスを与える！

HTML：

<body id="standard_label_style">
    <label>Hey!</label>
</body>

CSS：

#standard_label_style label{
    the styles
}

スタイルを取りますが、

HTML：

 <body id="custom_label_style">
     <label>Custom!</label>
 </body>

しない。

3
Chris Sobolewski
.standard_label_style, label {
    /* stuff */
}
3
Pedro Correia

私はあなたができるかわかりません...可能な回避策の1つ（少しハッキーな感じがします）は、スタイルをbodyタグに添付し、CSSを次のように変更することです：

body.standard_label_style label{
   //Your styles here
}
3
Ian Jacobs

ここではCSSの優先順位を扱います。 「あいまいさが増す」（bodyタグ、クラス）宣言は、「あいまいさが減る」（特定の要素、インラインCSS）宣言の前に適用されます。

したがって、あなたの答えは、スタイルシートがlabelスタイルを定義している方法に依存します。たとえばlabel {...}と表示されている場合、それはかなり具体的であり、より具体的なCSSスタイルを使用することをお勧めします。以下を参照してください。

私が言ったように、オーバーライドする必要のある「特異性」のレベルは、他のスタイルシートがどれほど特異的であったかによって異なります。リンクによると、「htmlに埋め込まれたCSSは、htmlの順序に関係なく、常に外部スタイルシートの後に来る」ということです。

自分でlabel {your custom css}を定義した場合、後でスタイルシートをインポートすると機能する可能性もあります。それが機能するかどうかを最初に確認しようとしています。これを試しましたか？結果はどうでしたか？

他のスタイルシートを完全に上書きしたい場合は、値をinheritに設定するか、必要に応じて、使用していないCSSもリセットする必要があります。

0
ninjagecko