Question

我有这样的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_tabs放在CSS的开头，严格遵循层次结构。

Answer 1

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

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

li.sn1 a {
    text-indent: 100%;
    white-space: no-wrap;
    overflow: hidden;
}

如何在div中引用ul元素？

1 个答案: