禁用 <a> 的 div 类以设置 <a> 的样式答案

【问题标题】：Disable div class for <a> to style the <a>禁用 <a> 的 div 类以设置 <a> 的样式
【发布时间】：2014-08-08 23:05:49
【问题描述】：

我有这段代码来设置<a href="#">:

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

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

【问题讨论】：

标签： html css href

【解决方案1】：

在这里，试试这个JSFiddle example，

.styled > a {
  color:black;
}

这里使用的> 意味着它只选择.styled 的直接子代，而不是所有子代。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

我不知道这是否是你所做的，但看起来第二个<div> 只是为了让第二个链接没有样式。

我建议改为提供此代码

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

然后在 CSS 中

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

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

【讨论】：