Question

我的网站顶部有一个标题中的3个菜单项目（目前不在线，因此我无法提供链接 - 抱歉）。 3'按钮'不是CSS按钮意义上的按钮 - 它们是文本渲染图像（不理想，我知道，但它们看起来很漂亮，所以......）。

无论如何，每个图像都包含不同的版本：1表示默认外观，1表示鼠标悬停，另一个表示onclick / active。我到目前为止使用的html和CSS看起来像这样：

HTML

<li>
    <a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
    <a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
    <a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;}
#Services {background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;}
#Contact {background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;}
a.button {height: 20px; display: inline-block;}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

由于某种原因，'悬停'和'活跃'状态无效。我注意到，如果我为每个按钮而不是id定义类，它可以正常工作 - 但这对我没有意义。每个按钮都有自己的图像和宽度，因此是唯一的（这就是为什么我给它们id而不是类）。

谁能解释我哪里出错了？我对这一切都不熟悉，所以任何解释都需要以外行人的话来说。

Answer 1

问题是您的ID选择器比您的类+伪选择器组合更具体。但是如果你没有在ID选择器中指定位置，你会没事的。 EG：

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

Answer 2

它不能与ID一起使用但与类一起使用的原因是id会覆盖，因为它们更具“特异性”。

当面临冲突时，CSS优先顺序包括样式与元素的具体匹配程度，以及ID是您可以获得的最具体的。

您是否有理由不想使用课程？在语义网中，通常会优先使用类来处理这种情况。

如何让'悬停'和'活跃'状态使用CSS和HTML？

2 个答案: