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

为每个链接添加一个类并改为定位它。

例如

<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 回答
1

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

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

和

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

这些属性选择器仅选择具有属性“id”的元素，该属性以指定的值开头，在本例中为“file_”或“play_”。此外，您应该摆脱重复的 id。无论哪种方式，这都会起作用，并且最新的浏览器版本可能会忽略您的重复 ID 并正确呈现页面。

于 2012-12-12T10:54:35.247 回答
0

你写的地方有一点语法错误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>
于 2012-12-12T10:21:28.207 回答