带有 id 和 css 的标签

Question

我正在尝试输出一些具有特定悬停/活动/链接属性的链接：

a#links:link {
  color: red;
  text-decoration: none
}
a#links:visited {
  color: goldenrod;
  text-decoration: none
}
a#links:hover {
  color: maroon;
  text-decoration: none;
  font-variant: small-caps
}

<div id="links" class="right" style="margin-right:65px">
  <ul class="nobull" style="margin:0">
    <li><a href="http://com">This link</a>
    </li>
  </ul>
</div>

链接属性没有被占用。某处的语法错误？我想不通。

Answer 1

使用a#links，您可以为所有带有 id 链接的 a 赋予样式，但您希望 div 中的所有 a 带有 id “链接”，因此您必须使用 #links a：

#links a:link{
 color:red;
 text-decoration:none}
#links a:visited{
 color:goldenrod;
 text-decoration:none}
#links a:hover{
 color:maroon;
 text-decoration:none;
 font-variant:small-caps}

<div id="links" class="right" style="margin-right:65px">
 <ul class="nobull" style="margin:0">
  <li><a href="http://com">This link</a></li>
 </ul></div>

Answer 2

a#links 选择一个不存在的具有链接 ID 的锚点。您需要#links a，它选择作为具有链接 ID 的 div 的后代的锚点。

#links a:link {
  color: red;
  text-decoration: none
}
#links a:visited {
  color: goldenrod;
  text-decoration: none
}
#links a:hover {
  color: maroon;
  text-decoration: none;
  font-variant: small-caps
}

<div id="links" class="right" style="margin-right:65px">
  <ul class="nobull" style="margin:0">
    <li><a href="http://com">This link</a>
    </li>
  </ul>
</div>

Answer 3

没有错误，但它在你的代码中。

通过在 CSS 文件中声明 a#links，它将寻找一个带有 ID links 的 a 标签。因此，您需要将id="links" 添加到a 标签，而不是像您那样添加到父div 标签。

或者，我会做的是定位您的具有 ID 的 div，并将 a 标记作为 CSS 规则中的选择器。

#links a {
  color: red;
  text-decoration: none
}
#links a:visited {
  color: goldenrod;
  text-decoration: none
}
#links a:hover {
  color: maroon;
  text-decoration: none;
  font-variant: small-caps
}