<a> 元素的 CSS id 选择器答案

【问题标题】：CSS id selector for <a> element<a> 元素的 CSS id 选择器
【发布时间】：2014-06-09 22:05:38
【问题描述】：

我是 HTML/CSS 新手。我尝试使用 id 选择器选择一个元素，但我的 CSS 代码不起作用。有人可以解释为什么它不起作用吗？

<!DOCTYPE html>
<html>
<head>
<style>
    #bigButton a {text-decoration:none;color:green;}
</style>
</head>
<body>
<p>test</p>
<a id=”bigButton” href=”page1.html”>Click here</a>
</body>
</html>

请注意，我也尝试了没有 a（即 #bigButton {text-decoration:none;color:green;} ）的 CSS，但这也不起作用。

【问题讨论】：

还有一个事实是，由于某种原因，您使用花哨的引号而不是直引号。
@BoltClock 是正确的，花哨的引号是问题的一部分。

标签： html css css-selectors

【解决方案1】：

a#bigButton {text-decoration:none;color:green;}

你的 CSS

#bigButton a {text-decoration:none;color:green;}

意思是“任何a元素，其祖先的id是bigButton”。

【讨论】：

【解决方案2】：

删除a 以执行id 选择器 它只是：

#bigButton {text-decoration:none;color:green;}

这可行：

 #bigButton a {text-decoration:none;color:green;}

如果a 有这样的父元素：

<div id="bigButton">
<a  href="page1.html">Click here</a>
</div>

正如@Pilot 和@BoltClock 所指出的，引号选择可能是另一个原因尝试这样的事情，而不是" 或id="bigButton"

Online Demo

【讨论】：

如果你想要更多的特异性，你总是可以使用a#bigButton，它也可以。