Question

<p class="butonat">
<a href="#"><span class="color1">Learn More&nbsp;</span></a>

我尝试了以下css，但没有效果：

CSS （由OP评论发贴）：

.butonat a.color1 { 
   font-size:16px; 
   font-family:'Source Sans Pro', FontAwesome, sans-serif; 
   font-weight:normal; 
   text-decoration:none; 
   text-align:center; 
   color:#fff; 
}

Answer 1

通过DOM访问链接的方式有很多种。

以下是几段代码片段，您可以这样做。

.color1 {
color: red;
}

a span.color1 { 
font-size: 30px;
}

<p class="butonat">
  <a href="#"><span class="color1">Learn More&nbsp;</span></a>

Answer 2

编辑：在您发送CSS后，我可以在您的选择器中看到丢失的SPACE：
.buttonat a.color1这意味着您的a-tag具有类color1
改为
.buttonat a .color1这将在您的标签中选择子女巫类color1

Answer 3

你的CSS：

.butonat > a {
  color:green;
  text-decoration:none;
}

.butonat > a:hover {
  color:red;
  text-decoration:underline;
}

<p class="butonat">
<a href="#"><span class="color1">Learn More&nbsp;</span></a>
</p>

使用上面的方法在锚标记上添加CSS。这种方式用于在类块上应用相同的CSS。

您也可以在其上应用更多属性。

<强>更新

发布有问题的CSS：

您需要在a和class name之间给出空格：

.butonat a .color1 {
          ^^ here need space

原因：你没有给它空间，因为它正在考虑类名是锚标签。在给出空格之后，它将认为类名在相邻标签中。所以你需要给空间。

如何在以下代码中设置链接的样式

3 个答案: