html - 使用动态 ID 处理 CSS

Question

我的 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？

Answer 1

给标签添加类

<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，所以要么完全删除 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 */
}