CSS 链接样式优先级答案

【问题标题】：CSS link styling priorityCSS 链接样式优先级
【发布时间】：2017-05-03 13:08:08
【问题描述】：

我正在使用 CSS 来设置我为学校制作的网站上的一些链接的样式，但我遇到了问题。有一点是用 CSS 设计的，所以它可以用作导航菜单。其他链接是带有一些样式的常规链接。导航菜单也必须在常规链接样式的 div 标签中，否则背景不会覆盖整个页面。

问题是，由于导航菜单的 div 被放置在其他链接的样式中，两种样式的效果都会应用到导航菜单。

有没有办法让导航菜单的样式比其他链接的样式具有更高的优先级，以便只应用导航菜单的样式？

这是导航菜单的 CSS：

    /* styling voor navigation menu */

.nav ul {
    list-style: none;
    background-color: #525252;
    text-align: center;
    padding: 0;
    margin-left: 400;
    margin-right: 400;
    border-radius: 10px;
    border: 1px solid black ;
    color: #fff;
    }

.nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 30px;
    height: 30px;
}

.nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
}

.nav a:hover {
    background-color: #404040;
}

.nav a.active {
    background-color: #404040;
    color: #fff;
    cursor: default;
}

.nav li {
    width: 110px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2em;
  }

.nav li {
    display: inline-block;
    margin-right: -4px;
  }

    /* extra class voor meescrollen menubalk */

 .main-nav-scrolled {
    position: fixed;
    top: 0;
    z-index: 9;
    text-align: center;
    width: 41%;
    background: #858585
    }

这是其他链接的 CSS：

/* links voor onderste gedeelte pagina */

.bottom a:link {
    text-decoration: none;
    color: inherit;
}

.bottom a:visited {
    text-decoration: none;
    color: inherit;
}

.bottom a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}

.bottom a:hover {
    color: inherit;
    border-color: inherit;
}

这是 HTML 的重要部分：

    <div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>

<?php
echo " <span style='color:$color'><a href='SQLdetailtypendb.php?id=" . $data['type_id'] . "'>" . $type1 . '</span></a>';    
?>
    </div>

提前致谢！ -Gijs

【问题讨论】：

你能给我看一个例子，说明你的 html 中有你的常规a 链接吗？您在发布的第二个 CSS 部分中设置样式的那些。
您可以使用!important 覆盖其他。前任。 color: #fff !important;
@Phantom 可行，但通常是一个非常糟糕的解决方案，如有必要应避免使用。
是的......我知道......但是你有覆盖其他人的css......
只需使用更具体的选择器....bottom .nav a { … }

标签： html css

【解决方案1】：

如果您将样式添加到 .bottom a 而不是给 .bottom .nav a 的样式，例如 background: green，它也将成为 .bottom .nav a 的样式。如果您只想为.bottom .nav a 自定义样式，则需要覆盖所有样式

因为 .nav a 是 .bottom 的后代，即使你写了一个非常具体的路径，例如 .bottom .nav ul li a ，它也会继承自 .bottom a '独特'的样式

例如

sn-p 对你不好（.nav li a 从 .bottom a 继承 background: green 样式，因为它本身没有 background 样式）

.bottom .nav a:hover { color:red;}
.bottom a:hover { color:yellow;background:green}

<div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>
</div>

sn-p 好（通过添加background:none 或background: anythinghere image or color etc. 为.bottom .nav li a 禁用背景：绿色从.bottom a）

.bottom .nav a:hover { color:red;background:black}
.bottom a:hover { color:yellow;background:green}

<div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>
</div>

【讨论】：

" 如果您只想为.bottom .nav a 自定义样式，则需要覆盖所有样式" 这是问题所在，非常感谢！

【解决方案2】：

所以你首先要做的是为nav 中的所有链接添加一个新类，例如：

<li class="Types"><a class="new-class-here" href="Over ons.html">Types</a></li>

然后在导航的 CSS 中，您将使用 .nav a.new-class-here 代替 .nav a，.nav a.new-class-here:hover 代替 .nav a:hover，等等。

然后在您的 css 中为其他常规链接使用 .bottom a:not(.new-class-here) 而不是 .bottom a。这样做是选择.bottom 中没有我们创建的新类的所有链接。因此，现在您的导航样式将仅适用于您的导航链接，而您的常规样式将仅适用于非导航链接。

如果您愿意，可以在此处了解有关:not() 的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

【讨论】：