Question

我正在重新开发一个网站，我希望在菜单中有简单的链接，以便用户可以在新标签中打开它们，菜单项目前看起来像这样：

<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>

但现在链接正在设置菜单项的文本样式，在这种情况下，“messages”变为粗体和蓝色。会有很多其他菜单项有很多不同的样式，有没有办法阻止链接样式化其内容？

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

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

这是一个有效的选择吗？

Answer 1

您可以将div移到a标记之外或对其应用类并为其指定自定义样式（覆盖链接指定的样式）。所以在这种情况下，你可能想要在menu-left-item类中添加一些CSS，这样看起来就像你想要的那样。

Answer 2

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

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

无法在IE6上运行

Answer 3

只需添加如下样式：

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

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

Answer 4

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

添加课程

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

<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中不起作用！

希望这会有所帮助。：）

如何防止链接造型他们的孩子

4 个答案: