禁用<a> to style the </a> <a></a>的div类

Question

我有这个代码来设置<a href="#">：

的样式

<div class="styled">
    <a href="#">link</a>
    <div class="notStyled">
        <a href="#">another link</a>
    </div>
</div>

第一个链接有一个样式，第二个链接有相同的样式，我希望它像默认链接一样默认。

Answer 1

在这里，试试这个JSFiddle example，

.styled > a {
  color:black;
}

此处使用的>表示它仅选择.styled的直接子项，而不是所有子项。

您可能正在做的是.styled a，它会选择所有孩子（甚至嵌套在其他孩子中），并且您不想这样做......

Answer 2

没有看到你的代码，我只能猜到你做了什么 根据您的问题，我想要设置第一个，而不是第二个a标记的样式 您可以使用它仅设置第一个a标记的样式：

.styled > a {
    /* your styling */
}

>会选择.styled的直接子项，因此不会为.notStyled a设置样式。

Answer 3

试试这个：

.styled > a {
    color:red; /*custom style for the first link*/
}

现场例证：http://jsfiddle.net/72bQM/1/

Answer 4

我不知道这是不是你做了什么，但看起来第二个<div>就像尝试让第二个链接没有风格一样。

相反，我建议让这段代码

<div>
  <a href="#" class="styled">
  <a href="#">
</div>

然后在CSS中

.styled{
/* Give the style you want */
}

这样您只需将class="styled"添加到要设置样式的链接，而无需使用多个DIV。