如何独立设置 <a> 标签的样式？ [关闭]答案

【问题标题】：How to style <a> tags independently? [closed]如何独立设置 <a> 标签的样式？ [关闭]
【发布时间】：2013-06-25 01:52:42
【问题描述】：

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

【问题讨论】：

“这个问题没有显示任何研究工作” - 否决按钮工具提示
抱歉。还没想好什么时候该回答什么时候不该回答。
为什么人们不赞成这个问题？不必要的——问题是客观的。可能我们的伙伴没有任何语法，但需要一个灯才能在 HTML 中制作他的 cookie。保持冷静，先生们。 @Zenith 也许他不知道该寻找什么。
@chiefGui 阅读关于页面。摘录：“不要问……你还没有试图找到答案的问题（展示你的作品！）”
@xec 这样想，你是对的。

标签： html css

【解决方案1】：

要为您的标签（或任何 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 的更深入说明，请参阅this guide。

【讨论】：

【解决方案2】：

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

CSS：

a.red {
   color: red;
}

a.blue {
   color: blue;
}

HTML：

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

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

看here, on JSFiddle玩吧。

【讨论】：

【解决方案3】：

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

.someClass { /* your styles here */ }

【讨论】：

【解决方案4】：

为它们添加 id 或类

html:

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

css:

.anchor1{
   color: red;
}

.anchor2{
   color: blue;
}

【讨论】：

【解决方案5】：

给他们一个 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;}

【讨论】：

【解决方案6】：

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

在你的 CSS 中：

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

在您的 HTML 中：

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

【讨论】：