CSS 的其他按钮不会正确显示答案

【问题标题】：Other buttons won't appear properly for CSSCSS 的其他按钮不会正确显示
【发布时间】：2013-07-15 17:52:52
【问题描述】：

所以在我遇到每个按钮之间的空间问题之前。现在有这个烦人的问题。我有四个按钮，但只显示前 3 个。为什么没有FAQ按钮？这让我很烦。如果这是一个问题，那么我将为 3 个按钮创建一个 html 代码，然后为 FAQ 按钮创建 1 个单独的代码。我只是觉得这很奇怪，因为在我没有问题之前。我尝试从 CSS AND html 中删除常见问题解答代码，然后重新粘贴它，但它给了我相同的结果。

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.helpicon a#editinfo{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/editinfo.png) no-repeat;
}

.helpicon a:hover#editinfo{
    background: url(http://icpy.webs.com/button/editinfo0.png) no-repeat;
}
.helpicon a#codes{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/codes.png) no-repeat;
}

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;
}
.helpicon a#music{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/music.png) no-repeat;
}

.helpicon a:hover#music{
    background: url(http://icpy.webs.com/button/music0.png) no-repeat;

.helpicon a#faq{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/FAQ.png) no-repeat;
}

.helpicon a:hover#faq{
    background: url(http://icpy.webs.com/button/FAQ0.png) no-repeat;
}
}
.helpicon a{
  margin: 4px;
  }
</style>

<body>

<div class="helpicon">
<a href="http://www.twitter.com" id="editinfo"/>
<a href="http://www.twitter.com" id="codes"/>
<a href="http://www.twitter.com" id="music"/>
<a href="http://www.twitter.com" id="faq"/>
</div>
</body>

【问题讨论】：

因为.helpicon a:hover#music{之后没有关闭括号
哦，不，我按了 Ctrl+C。无效文档类型工作室什么时候会抓住我？ ;)

标签： html css button

【解决方案1】：

为<a> 标签使用正确的语法

<a href="http://www.twitter.com" id="editinfo"></a>
<a href="http://www.twitter.com" id="codes"></a>
<a href="http://www.twitter.com" id="music"></a>
<a href="http://www.twitter.com" id="faq"></a>

并且css中缺少一个括号

<!CASCADE STUDIOS COPY AND YOU WILL BE CAUGHT">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css">
.helpicon a#editinfo{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/editinfo.png) no-repeat;
}

.helpicon a:hover#editinfo{
    background: url(http://icpy.webs.com/button/editinfo0.png) no-repeat;
}
.helpicon a#codes{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/codes.png) no-repeat;
}

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;
}
.helpicon a#music{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/music.png) no-repeat;
}

.helpicon a:hover#music{
    background: url(http://icpy.webs.com/button/music0.png) no-repeat;
}
.helpicon a#faq{
    display: block;
    width:138px;
    height:27px;
    background:  url(http://icpy.webs.com/button/FAQ.png) no-repeat;
}

.helpicon a:hover#faq{
    background: url(http://icpy.webs.com/button/FAQ0.png) no-repeat;
}

.helpicon a{
  margin: 4px;
  }
</style>

<body>

<div class="helpicon">
<a href="http://www.twitter.com" id="editinfo"></a>
<a href="http://www.twitter.com" id="codes"></a>
<a href="http://www.twitter.com" id="music"></a>
<a href="http://www.twitter.com" id="faq"></a>
</div>
</body>

【讨论】：

【解决方案2】：

您错过了本节结束时的}：

.helpicon a:hover#codes{
    background: url(http://icpy.webs.com/button/codes0.png) no-repeat;

【讨论】：