3

我有一个这样的 HTML 结构：

<div id="main_tabs">
    <ul id="main_tabs_nav">
        <li class="sn1"><a id="divleftlink0" rel="nofollow" href="javascript:divActivate(0,2,'divleft');" class="active">Newsletter</a>
        </li>
        <li class="sn2"><a id="divleftlink1" rel="nofollow" href="javascript:divActivate(1,2,'divleft');" class="inactive">Get Social</a>
        </li>
        <li class="sn3"><a id="divleftlink2" rel="nofollow" href="javascript:divActivate(2,2,'divleft');" class="inactive">Testimonials</a>
        </li>
    </ul>
</div>

我应用了这样的 CSS，它工作正常：

#main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}

但这不起作用：

#main_tabs #main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}

如何让第二段 CSS 代码也能正常工作？

我也想放入#main_tabsCSS 的开头，以严格遵循层次结构..

4

1 回答 1

1

您的 HTML 和 CSS 没有任何问题。这两种 CSS 样式都是从分层​​的角度工作的。您可以看到我添加了另一种样式，以使用#main_tabs 作为父级将第一个链接变为红色，并且在这里工作正常。

如果您要进行文本替换，我会改用此方法：

li.sn1 a {
    text-indent: 100%;
    white-space: no-wrap;
    overflow: hidden;
}
于 2013-09-07T15:09:16.603 回答