活动页面：精灵的悬停状态

Question

我正在使用此页面： glustik.com/dustreeproducts/index.php

我正在尝试使“活动页面”导航显示为“活动页面”。

我在标记中有一个 body_company 的正文 ID 标记。

这是第一个导航按钮的 CSS 规则：公司

background:url(../images/navigation/nav-company.png) no-repeat;
display:block;
text-decoration:none;
width:103px;
margin:20px 27px 0 20px;
height:20px;}
#nav ul li#company a:hover {
background-position:0 -20px;}
#nav ul li#company a:active {
background-position:0 -40px;}
body #body_company #company a {
background-position:0 -40px;}

相关 HTML 标记：

body id="body_company"

我尝试了一些不同的方法，似乎无法让它在页面上显示活动状态。

Answer 1

body 和 #body_company 之间有一个空格，它应该是：

body#body_company #company a {

或只是：

#body_company #company a {

编辑： 另一个问题：“正常”的选择器“ state #nav ul li#company a 比活动选择器具有更高的特异性/值：

#nav ul li#company a

级联中的分数高于：

body#body_company #company a

所以你必须使用：

#company a    /* for the normal state */

或类似的东西：

body#body_company #nav #company a    /* for the active state */

我建议只使用#company a 为正常声明，如果您的 ID 是唯一的（无论如何它们都应该是......），那就足够具体了。