我有这个:
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 中调用它?
最佳答案
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显示这些变化。
关于css - 链接的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12115680/