CSS 链接和悬停操作？

Question

有一个页面可以安装到其他站点的链接，链接输入如下:

<div id="mainContent">
         <div id="links">
            <a href="http://www.google.com" target="blank">Go To Google</a>
            <a href="http://www.yahoo.com" target="blank">Go To Yahoo</a>
            <a href="http://www.espn.com" target="blank">Go To ESPN</a>
            <a href="http://www.abcnews.com" target="blank">Go To ABC News</a>
            <a href="http://www.youtube.com" target="blank">Go To Youtube </a>        
       </div>       
</div>

由外部样式表中的以下 css 控制

div#links a {
        width:550px;
        display:block; 
        margin-left:10px; 
        margin-top:2px; 
        padding: 2px 5px 2px 5px;
        text-decoration:none;
        font-family:arial;
        font-weight:bold;
        text-align:center;
        background-color: black;
        color: white;
        font-size:9pt;
        border: 3px red ridge;
}
a:hover {
        background-color:navy;
        color:red;
        font-style:italic;
}

当在头部有 css 的独立情况下操作时，包括悬停在内的显示工作正常，但是当我将它移动到页面中的真实内容区域并在外部样式表中安装 css 时，悬停不再有效!

Answer 1

您可能没有以正确的方式链接到您的样式表。

要么你根本没有链接它:

<link href="/style/style.css" rel="stylesheet" type="text/css">

或者您使用的是本地路径:

您应该(几乎)总是使用相对路径来链接到网络上的内容。

所以:

http://example.com/style/style.css

或

file://host/path/style/style.css

成为

/style/style/css