0

我有这个：

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 中调用它？

4

2 回答 2

4

选择div#tt a器指示id<a>内的所有链接 ( )应以特定方式设置样式 - 在本例中，设置颜色。所以：<div>tt

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

在此示例中，链接 1 的样式将根据div#tt a，但链接 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 相同，由用于 .css 的 css 指定div#tt a。如果您想在 Link 2 上使用不同的样式，则需要应用一个选择器，例如div#tt div#abc a.

有关示例，请参阅此 JSFiddle。

编辑

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

使用 a <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.

我已经更新了 JSFiddle 示例以显示上述内容。

编辑 2

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

例如，如果您希望 Link 1 和 Link 2 以一种方式设置样式，而 Link 3 和 Link 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>，它就会被适当地设置样式。）

JSFiddle再次更新以显示这些更改。

于 2012-08-24T19:49:52.440 回答
0

使用你的班级：

#tt.someotherclass a, #tt.someotherclass span.link {
    color: green;
}
于 2012-08-24T19:47:52.560 回答