Frage CSS: Selektierung greift nicht

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DerNeuling21

Mitglied
15 September 2017
62
1
8
20
Hallo zusammen,

ich bin auf ein Problem gestoßen und möchte jetzt gerne wissen, warum das nicht so funktioniert, wie ich es mir erhoffe.

Hier der Code:

HTML:
<html lang="de">
    <header>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="costume.css">  
    </header>
    <body>
        <head>
            <nav class="navbar navbar-expand-lg navbar-light navbar-default">
                <a class="navbar-brand" href="#">------</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
              
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Dashboard<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kontakte</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Vorgänge</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Belege</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </head>
    </body>
</html>

CSS:
.navbar-default {
    background-color: #1C1C1C;
}

.navbar-default .navbar-nav > li > a {
    color: white;
}

.navbar-default .navbar-nav > li > a:hove {
    color: #28a745;
}
.navbar-default .navbar-nav > li > a:focuse {
    color: #28a745;
}

.navbar-default .navbar-nav > li > a:active {
    color: #28a745;
}

Seite ist unter: http://www.wolly.biz/dashboard.html zu erreichen.

Sonst gibt es nur noch Bootstrap als CSS

Warum greift die weiße/grüne Schrift nicht?

Danke für eure Hilfe.
 
Zuletzt bearbeitet:
Werbung:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.585
232
63
Hallo

Mit deinen Angaben kann ich nichts anfangen.

Der HTML-Quelltext ist unvollständig. Zudem enthält er Klassen, die im CSS nicht vorkommen. Das Problem kann sich also im fehlenden CSS verstecken.

Wenn du uns nur ein paar Quelltextschnipsel hinschmeißt können wir dir kaum helfen. Wir benötigen den gesamten Quelltext oder, noch besser, einen Link zu der Seite.

Ich sehe nur, das es im CSS hove und focuse nicht gibt.

Gruss

MrMurphy
 
Werbung:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.585
232
63
Hallo

Zunächst solltest du die beiden von mir genannten Rechtschreibfehler (focuse = focus und hove = hover) ändern.

Danach die Fehler im HTML-Quelltext:

Validator

Gruss

MrMurphy
 
Werbung:

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
Ich würde aber gerne wissen, warum die costume Anpassung nicht funktioniert. Eigentlich müsste Sie ja.
Das liegt daran, dass die CSS Selektoren von Bootstrap spezifischer sind als deine.
Bootstraps .navbar-light .navbar-nav .active>.nav-link ist spezifischer (Umfangreicherer Selektor) als dein .navbar-default .navbar-nav > li > a.

Am einfachsten könntest du das mit !important machen. Also Beispielsweise:
Code:
.navbar-default .navbar-nav > li > a {
    color: white !important;
}

Beachte aber, dass !important keine schöne Praxis ist, da du die natürliche Überschreibung von CSS damit verhinderst.

Eine alternative wäre, genau die selben CSS Selektoren zu verwenden wie Bootstrap selbst, dann sind die originalen Selektoren auch nicht mehr spezifischer (wie oben erwähnt.)
Also statt .navbar-default .navbar-nav > li > a nimmst du .navbar-light .navbar-nav .active>.nav-link.
 
  • Like
Reaktionen: Sempervivum
Werbung:
Werbung: