Question

我使用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

Answer 1

因此，您首先要做的是为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

Answer 2

如果您向.bottom a添加未.bottom .nav a的{{1}}样式，则background: green也将成为.bottom .nav a的样式。如果您只想要.bottom .nav a

的自定义样式，则需要覆盖所有样式

因为.nav a是.bottom的后代，即使您编写了非常具体的路径，例如.bottom .nav ul li a，它也会继承.bottom a “独特”的风格

例如

代码段不适合您（.nav li a继承background: green .bottom a样式，因为它没有自己的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>

代码段好（禁用背景：绿色来自.bottom a，为background:none添加background: anythinghere image or color etc.或.bottom .nav li 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>

CSS链接样式优先级

2 个答案: