活动页面：Sprite 的悬停状态

Question

我正在处理这个页面： glustik.com/dustreeproductions/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 {

编辑：另一个问题：“正常”状态#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 */

如果您的 ID 是唯一的（无论如何它们应该是唯一的......），我建议您只在正常状态下使用 #company a，这已经足够具体了。