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

Frage CSS: Selektierung greift nicht

D

DerNeuling21

Mitglied
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:
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
 
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
 
DerNeuling21 schrieb:
Ich würde aber gerne wissen, warum die costume Anpassung nicht funktioniert. Eigentlich müsste Sie ja.
Zum Vergrößern anklicken....
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben