19

スタイルが定義されている場合

.style1
{
   width: 140px;
}

2 番目のスタイルから参照できますか?

.style2
{
   ref: .style1;
}

または、javascript/jQuery 経由の方法はありますか?

- - 編集

問題を明確にするために、CSS には制御できない更新があるため、CSS を変更せずに、#x と #c に定義されているスタイルを .x と .c に適用しようとしています。

幅を使用しましたが、実際のスタイルは、フォント、境界線、およびその他のスタイル要素が指定された、より複雑なものになります。

複数のクラス名を指定すると、スタイルがクラスに適用されているときに機能するため、既存の応答を回答としてマークしますが、id に適用されているスタイルを取得し、それをクラス スタイルにも適用する必要があります...意味があります。

4

7 に答える 7

14

CSS でそれを行う方法はありません。これはよく要求される機能ですが、まだ仕様には含まれていません。JS で直接行うこともできませんが、ハックな回避策があります。

$('.style2').addClass ('style1');
于 2008-10-08T03:50:41.010 に答える
7

要素が複数のスタイルを継承できるようにすることで、同じ機能を実現できます。元。

<p class="style1 style2">stuff</p>

そして、あなたのcssには、例えば次のものが含まれます：

.style1 {width:140px;}
.style2 {height:140px;}

編集：実際にはロバートの答えは、あなたが達成しようとしている方法に近いかもしれません

.style1, .style2 {width: 140px;}
.style2 {height: 140px;}

<p class="style2">i will have both width and height applied</p>
于 2008-10-08T03:51:23.037 に答える
5

複数のブロックに同じコードを使用する 1 つの方法は、次のとおりです。

 .style1, .style2 { width: 140px; }
于 2008-10-08T03:52:17.140 に答える
2

もう 1 つの方法は、less や sass などの前処理ツールを使用することです。次に、less/sass ファイルをコンパイルすると、通常の css になります。

ここにlessとsassのドキュメントがあります。

// example of  LESS

#header {
h1 {
  font-size: 26px;
  font-weight: bold;
  }
p { font-size: 12px;
  a { text-decoration: none;
    &:hover { border-width: 1px }
    }
  }
}


/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}
于 2013-10-04T01:00:29.063 に答える
1

いくつかのオプション:

  1. その場で、またはスタイル シートの作成中に CSS を動的に生成します (私は Visual Studio マクロを使用して、フォント、数字、および色の定数を実装し、色の明暗を計算します)。このトピックは、このサイトの他の場所でよく議論されています。

  2. 幅が 140 ピクセルのスタイルが多数あり、それらすべてのスタイルのサイズを柔軟に変更したい場合は、次のようにします。 

    div.FixedWidth {width:140px;}
div.Style1 {whatever}
div.Style2 {whatever}

と

    <div class="Style1 FixedWidth">...</div>
    <div class="Style2 FixedWidth">...</div>
于 2008-10-08T04:14:49.933 に答える
0

私はこれと同じことを試みていて、このWebページ（および他のいくつか）を見つけました。これを行う直接的な方法はありません。いいえ:

<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b { font-size: 24pt; }
.c { b }
</style></head><body>
<span class='c'>This is a test</span></body></html>

動作しません。ここでの問題は、(私のような) 論理的な方法で物事を行おうとしているということです。(つまり: A-then-B-then-C)

他の人が指摘しているように、これはうまくいきません。動作する必要があり、CSS には他にも多くの機能がある必要があります。そうではないので、回避策を講じる必要があります。これを回避するためのjQueryの方法をすでに投稿している人もいますが、わずかな変更で目的を達成できます。

<html><head><title>Test</title><style>
.a { font-size: 12pt; }
.b,.c { font-size: 24pt; }
</style></head><body>
<span class='c'>This is a test</span></body></html>

これは同じ効果を達成しますが、方法が異なります。「a」または「b」を「c」に代入しようとする代わりに、「c」を「a」または「b」に代入してください。コードの残りの部分に影響を与えることなく、同じ効果が得られます。

次の質問は、「複数の CSS アイテムに対してこれを実行できますか? (font-size、font-weight、font-family など)」です。答えは「はい」です。「,.c」の部分をあなたがそれを一部にしたいそれぞれのものと、それらの「部分」のすべてが「.c」の一部になります。

<html>
<head>
<title>Test</title>
<style>
.a  { font-size: 12pt; }
.b,.c   { font-size: 24pt; }
.d  { font-weight: normal; }
.e,.c   { font-weight: bold; }
.f  { font-family: times; }
.g,.c   { font-family: Arial; }
</style>
</head>
<body>
<span class='c'>This is a test</span>
</body>
</html>
于 2015-05-08T19:18:38.703 に答える