如何<a>独立设置标签样式？

Question

我应该如何使锚点标签彼此独立，这样更改其中一个标签的大小就不会影响其他标签？

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

将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 5

<a class="someClass">Link</a>
.someClass { /* your styles here */ }

Answer 6

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

请注意一个重要的概念，即ID只能使用一次，而类应该用于同一元素的多个项，但不是所有项，例如：使用CLASS：（链路1大小为20，链路2和3大小为10，而链路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的更深入解释，请参阅本指南。