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 common。我该如何定义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>

因为你有双重身份证，所以要么删除身份证明，要么让身份证明是唯一身份

<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 */
}

Answer 2

为每个链接添加一个类，然后将其作为目标。

E.g。

<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
}

Answer 3

完成此任务的最简单方法是使用css属性选择器。在这种情况下，它将是：

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

和

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

这些属性选择器只选择具有属性“id”的元素，该元素以指定值开头，在这种情况下它是“file_”或“play_”。你也应该摆脱重复的id。无论哪种方式都可行，最新的浏览器版本可能会忽略您的重复ID并正确呈现页面。

Answer 4

在写id="Play_1"

时会出现轻微的语法错误

请按照编程模式使用类进行操作，您可以在其中定义元素属性，并将该类用于您想要该效果的所有元素。

<!DOCTYPE html>
<html>
<style>
.play_1 {
background-color : green;
}
.play_2 {
background-color : red;
}
</style>
<body>
<a href="#" class="play_1">play1</a>
<a href="#" class="play_2">play2</a>

<a href="#" class="play_1">play3</a>
<a href="#" class="play_2">play4</a>

<a href="#" class="play_1">file1</a>
<a href="#" class="play_2">file2</a>
</body>
</html>

使用动态ID处理CSS

4 个答案: