css - 为什么这种图像替换技术不起作用？

Question

我正在尝试练习图像替换技术，主要用于导航目的。我似乎无法弄清楚为什么它不起作用。悬停有效，但默认菜单项无效。我很确定事情写得正确。

http://lrroberts0122.github.com/DWS/practical/index.html

这是导航的 HTML:

<ul id="nav">
    <li id="process"><a href="index.html" id="active">Our Process</a></li>
    <li id="function"><a href="function.html">Bio-Built Function</a></li>
    <li id="future"><a href="future.html">The Future</a></li>
    <li id="engage"><a href="engage.html">Engage Dio</a></li>
</ul>

这是我的导航 CSS:

#nav {
    list-style: none;
    width: 244px;
    height: 124px;
    overflow: hidden;
    }

#nav li {
    float: left;
    }

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

#process {
    background-position: 0 0;
    }

#process:hover {
    background-position: -244px 0;
    }

#function {
    background-position: 0 -31px;
    }

#function:hover {
    background-position: -244px -31px;
    }

#future {
    background-position: 0 -60px;
    }

#future:hover {
    background-position: -244px -62px;
    }

#engage {
    background-position: 0 -90px;
    }

#engage:hover {
    background-position: -244px -93px;
    }

Answer 1

首先，您在那里写的一个选择器与我在网站上看到的不匹配:#nav li a 在您的网站上是 #nav li。

其次，您需要注意 CSS 选择器的特殊性:

#nav li

将否决:

#process

但是:

#nav #process

不会被否决。

您可以在这里找到一篇关于特异性的非常好的文章:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/