css - 链接的不同颜色

Question

我有这个:

DIV#tt {
    background: #fff;
    color: #333;
    margin: 0 0 15px;
    position: relative;
    padding: 1px;
}
DIV#tt A,
DIV#tt SPAN.link {
    color: #990000;
}

这很好用并改变了我的链接的颜色。

<div class="someotherclass"><span>My Link </span></a></div>

现在我的问题是有时我需要绿色来代替。我怎样才能在上面的 CSS 中创建异常，然后在 HTML 中调用它？

Answer 1

div#tt a选择器表示 <a> 内的所有链接( <div> ) ID tt应该以特定方式设置样式——在本例中，设置颜色。所以:

<div id="tt">
    <a href="#">Link 1</a>
</div>
<div id="abc">
    <a href="#">Link2</a>
</div>

在此示例中，链接 1 的样式将根据 div#tt a , 但 Link 2 不会。

现在，如果你在 tt div 中有 Link 2，就像这样

<div id="tt">
    <a href="#">Link 1</a>
    <div id="abc">
        <a href="#">Link 2</a>
    </div>
</div>

然后链接 2 将的样式与链接 1 相同，由 div#tt a 的 css 指定。 .如果您想在 Link 2 上使用不同的样式，则需要应用一个选择器，例如 div#tt div#abc a .

参见 this JSFiddle例如。

编辑

如果您希望两个链接位于同一行，但样式不同，您可以用 <span> 包围第二个链接。而不是 <div> ，这不会强制换行，或者您可以将 id 添加到第二个链接。

使用 <span> , 这是 HTML:

<div id="tt">
    <a href="#">Link 1</a>
    <span id="abc"><a href="#">Link 2</a></span>
</div>

然后您将使用 div#tt span#abc a 设置第二个链接的样式.

或者，您可以向第二个链接添加一个 id 并将其用于样式。 HTML:

<div id="tt">
    <a href="#">Link 1</a>
    <a href="#" id="two">Link 2</a>
</div>

然后您通常将链接样式设置为 div#tt a第二个链接使用 div#tt a#two .

我已经更新了 the JSFiddle example显示以上内容。

编辑 2

根据以下 F. Müller 的评论，这是绝对正确的。我在上面的示例中大量使用了 id，但使用其他类型的选择器可能是更好的做法(尤其是如果您想以“辅助”样式设置多个链接的样式)。

例如，如果您希望链接 1 和链接 2 的样式为一种，而链接 3 和链接 4 的样式为另一种，这将是一个很好的 HTML:

<div id="myDiv" class="something">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#" class="secondary">Link 3</a>
    <a href="#" class="secondary">Link 4</a>
</div>

样式为:

div.something a {
    /* styling for primary links */
}
div.something a.secondary {
   /* styling for secondary links */
}

在这里，如果您想为更多链接添加辅助样式，您只需将类名添加到链接即可。 (也就是说，如果您想添加一个新的 Link 5，您只需将 class="secondary" 添加到 <a> 中，它的样式就会适当。)

和the JSFiddle updated again显示这些变化。