html - 如何独立设计标签？

Answer 1

给他们上css课？

<a href='http://google.com' class='class1'>Google</a>
<a href='http://yahoo.com' class='class2'>Yahoo</a>

a.class1{border:1px solid #ff9900;}
a.class2{border:1px solid #ff0099;}

或者使用包装元素

<div class='class-a'>
  <a href='http://google.com'>Google</a>
  <a href='http://yahoo.com'>Yahoo</a>
</div>

<div class='class-b'>
  <a href='http://google.com'>Google</a>
  <a href='http://yahoo.com'>Yahoo</a>
</div>

div.class-a a{background-color:red;}
div.class-b a{background-color:blue;}

Answer 2

你应该给他们单独的 CSS 类：

在您的 CSS 中：

a.this { ... }
a.that { ... }

在您的 HTML 中：

<a href='' class='this'>...</a>
<a href='' class='that'>...</a>

Answer 3

您可以使用类对锚点进行分类。

CSS：

a.red {
   color: red;
}

a.blue {
   color: blue;
}

HTML：

<a href="#" class="red">Hello!</a>
<a href="#" class="blue">Bye!</a>

您的输出将分别是红色和蓝色的锚点。

看看这里，在 JSFiddle上玩。

Answer 4

为了给您的标签（或任何 HTML 元素）添加不同的 CSS 样式，请使用 ID 或 CLASS。

请注意一个重要的概念，即 ID 只能使用一次，而类应该用于同一元素的多个项目，但不是所有项目，例如：使用 CLASS：（链接 1 的大小为 20，链接 2 和 3 是大小 10，而 Link 3 设置为默认大小）

<a href="#" class="anchor1">Link 1</a>
<a href="#" class="anchor2">Link 2</a>
<a href="#" class="anchor2">Link 3</a>
<a href="#" class="anchor3">Link 4</a>

<style>
.anchor1{
   font-size:20px;
}

.anchor2{
   font-size:10px;
}
</style>

使用 ID：（链接 1 的大小为 20，链接 2 的大小为 10，而链接 3 和 4 设置为默认大小。）

    <a href="#" id="anchor1">Link 1</a>
    <a href="#" id="anchor2">Link 2</a>
    <a href="#" id="anchor3">Link 3</a>
    <a href="#" id="anchor4">Link 4</a>

<style>
#anchor1{
   font-size:20px;
}

#anchor2{
   font-size:10px;
}
</style>

有关何时使用 ID 与 CLASS 的更深入说明，请参阅本指南。

Answer 5

为他们添加 id 或 class

html:

<a href="..." class="anchor1">Anchor 1</a>
<a href="..." class="anchor2">Anchor 2</a>

CSS：

.anchor1{
   color: red;
}

.anchor2{
   color: blue;
}

Answer 6

<a class="someClass">Link</a>

.someClass { /* your styles here */ }