0

私のhtmlページは次のようなものです...

<a href="#" id="play_1">play1</a>
<a href="#" id="play_2">play2</a>
<a href="#" id="play_1">play3</a>
<a href="#" id="play_2">play4</a>
<a href="#" id="file_1">file1</a>
<a href="#" id="file_2">file2</a>

play_"#" と file_"#" で共通の CSS を定義したい。どのようにCSSを定義できますか?

4

4 に答える 4

3

タグにクラスを追加する

<a href="#" class="play" id="play_1">play1</a>
<a href="#" class="play" id="play_2">play2</a>
<a href="#" class="play" id="play_1">play3</a> <!-- double ID -->
<a href="#" class="play" id="play_2">play4</a> <!-- double ID -->
<a href="#" class="file" id="file_1">file1</a>
<a href="#" class="file" id="file_2">file2</a>

ID が 2 つあるため、ID をまったく削除するか、ID を固有のものにしてください。

<a href="#" class="play" id="play_1">play1</a>
<a href="#" class="play" id="play_2">play2</a>
<a href="#" class="play" id="play_3">play3</a> 
<a href="#" class="play" id="play_4">play4</a>
<a href="#" class="file" id="file_1">file1</a>
<a href="#" class="file" id="file_2">file2</a>

css での使用

.play {
  /* add your common play styles here */
}
.file {
  /* add your common file styles here */
}
于 2012-12-12T10:16:10.200 に答える
1

このタスクを実行する最も簡単な方法は、css 属性セレクターを使用することです。この場合、次のようになります。

a[id^="play_"] {
  /* your declarations */
}

と

a[id^="file_"] {
  /* your declarations */
}

これらの属性セレクターは、指定された値 (この場合は "file_" または "play_") で始まる属性 "id" を持つ要素を選択するだけです。また、重複した ID を取り除く必要があります。どちらの方法でも機能し、最新のブラウザー バージョンでは重複した ID が無視され、ページが正しく表示される可能性があります。

于 2012-12-12T10:54:35.247 に答える
1

各リンクにクラスを追加し、代わりにそれをターゲットにします。

例えば

<a href="#" id="play_1" class="play">play1</a>
<a href="#" id="play_2" class="play">play2</a>
<a href="#" id="play_1" class="play">play3</a>
<a href="#" id="play_2" class="play">play4</a>
<a href="#" id="file_1>file1</a>
<a href="#" id="file_2">file2</a>

次に、css は次のようになります。

.play {
   //Style here
}
于 2012-12-12T10:16:35.623 に答える