0

我正在重新开发一个网站，我想在菜单中有简单的链接，以便用户可以在新选项卡中打开它们，目前菜单项如下所示：

<li class='menu-left-row' id='messages' onclick=\"javascript:showscreen_load('messages.php?sel=overview','messages','menu-left')\">
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    Messages
    </div>
</li>

现在我设置了一个函数，该函数将所有链接与类“toggle_reconstruct”相交，所以我想拥有它，而不是像这样：

<li class='menu-left-row' id='messages'>
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    <a class='toggle_reconstruct' href='/messages/'>Messages</a>
    </div>
</li>

但现在链接正在设置菜单项文本的样式，在这种情况下，“消息”变为粗体和蓝色。会有很多其他菜单项有很多不同的样式，有什么办法可以防止链接对其内容进行样式设置？

更新：有人刚刚指出我使用：

a:link {font-weight:inherit; color:inherit;text-decoration:none;}

这会是一个有效的选择吗？

4

4 回答 4

1

您可以将 div 移到a标签之外，也可以对其应用一个类并为其提供自定义样式（覆盖链接给出的样式）。因此，在这种情况下，您可能希望向menu-left-item该类添加一些 CSS，使其看起来像您想要的那样。

于 2012-06-06T18:18:32.263 回答
1

您可以在 CSS 中使用直系后代符号来防止样式级联超过第一级

.nav > li {background-color: #ccc;}

无法在 IE6 上运行

于 2012-06-06T18:18:57.973 回答
1

只需添加这样的样式：

<style>
a.toggle_reconstruct {
  color: #000000;
  text-decoration: none;
}
</style>

这是你想要达到的目标吗？

于 2012-06-06T18:22:59.083 回答
0

您可以通过两种方式阻止子代继承。

添加一个类：

如果你有一个嵌套列表，那么这将是一个问题。你想给主列表而不是子列表的背景，然后给主列表一个类。

<ul class="nav">
    <li class="main">Home</li>
    <li class="main">
        About
        <ul>
            <li>Products</li>
            <li>Contact</li>
            <li>Corporate</li>
    </li>
<ul>

而CSS为：

.nav .main {background-color: #ccc;}

通过特异性运算符：

<ul class="nav">
    <li>Home</li>
    <li>
        About
        <ul>
            <li>Products</li>
            <li>Contact</li>
            <li>Corporate</li>
    </li>
<ul>

而CSS为：

.nav > li {background-color: #ccc;}

注意：特异性方法在 IE 6 中不起作用！

希望这可以帮助。:)

于 2012-06-06T18:30:03.357 回答