CSS Links: Immer gleiche Farbe

[rschmidt]

Hallo zusammen,

ich baue für unseren Verein eine kleine Webanwendung um Daten zu erfassen oder sich Informationen zu holen.

Dabei habe ich ein Menu (je nach Bildschirmgröße im Dropdown Format oder oben an der Leiste):

Ich glaube, hier Sie man mein Problem schon recht gut: Zeiterfassung und Wachplan sehen so aus, wie Sie aussehen sollen (die beiden habe ich noch nicht angeklickt...) den Rest habe ich schon einmal verwendet. Sprich: solange ich die Menueinträge nicht auswähle ist alles gut. Nach der ersten "Benutzung" wechsel Sie die Schriftfarbe von Weiß zu blau.

Das CSS sieht wie folgt dazu aus:

body
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header
{
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 100px;
    background:#262626;
    width: 100%;
    box-sizing: border-box;
    text-shadow:0 0 0;
}
header .logo
{
    color: #fff;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    float: left;
    font-weight: bold;
}
header nav
{
    float: right;
}
header nav ul
{
    margin: 0;
    padding: 0;
    display: flex;
}
header nav ul li
{
    list-style: none;
}
header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited
{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    display: block;
}
header nav ul li a:hover,
header nav ul li a.active
{
    color: #fff;
    background: #2196f3;
}
.menu-toggle
{
    color: #fff;
    float: right;
    line-height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: none;
}

Folgende CSS Dateien werden on folgender Reihnfolge geladen:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">       
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<link rel="stylesheet" href = "https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/master/jquery.mobile.datepicker.css" />
<link rel='stylesheet' href='fullcalendar-3.9.0/fullcalendar.css' />
<link rel="stylesheet" type="text/css" href="css/style.css">

(Der obere Ausschnitt, stammt aus meiner style.css)

Der HTML Code fürs Menu sieht wie folgt aus:

<nav >
    <ul>
        <li><a href="?tab=home" data-ajax="false"><i class="fas fa-home"></i>&nbsp;Home</a></li>
        <li><a href="?tab=mitglieder" data-ajax="false"><i class="fa fa-users"></i>&nbsp;Mitglieder</a></li>
        <li><a href="?tab=spenden" data-ajax="false"><i class="fas fa-piggy-bank"></i>&nbsp;Spenden</a></li>
        <li class="sub-menu"><a href="#" class="active"><i class="fas fa-clock"></i>&nbsp;Zeiterfassung</a>
            <ul>   
                <li><a href="?tab=zeiterfassungerfassen" data-ajax="false">&nbsp;&nbsp;<i class="fas fa-stopwatch"></i>&nbsp;Erfassen</a></li>   
                <li><a href="?tab=zeiterfassungliste" data-ajax="false">&nbsp;&nbsp;<i class="fas fa-list"></i>&nbsp;Übersicht</a></li>
            </ul>
        </li>
        <li class="sub-menu"><a href="#"><i class="fas fa-calendar-alt"></i>&nbsp;Wachplan</a>
            <ul>   
                <li><a href="?tab=wachplankalender" data-ajax="false">&nbsp;&nbsp;<i class="far fa-calendar-alt"></i>&nbsp;Kalender</a></li>   
                <li><a href="?tab=wachplanmeinedienste" data-ajax="false">&nbsp;&nbsp;<i class="fas fa-clipboard-list"></i>&nbsp;Meine Dienste</a></li>   
                <li><a href="?tab=zeiterfassungliste" data-ajax="false">&nbsp;&nbsp;<i class="far fa-comment-alt"></i>&nbsp;Eintragen</a></li>   
                <li><a href="?tab=zeiterfassungliste" data-ajax="false">&nbsp;&nbsp;<i class="fas fa-clipboard-check"></i>&nbsp;Verwaltung</a></li>
            </ul>
        </li>
        <li><a href="index.php?out=1" data-ajax="false"><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</a></li>
</nav>

Hat jemand eine Idee, woran es liegt, das die "besuchten Links" falsch dargestellt werden?

Vielen Dank für Eure Hilfe.

 

[Sailor]

https://www.w3schools.com/cssref/sel_visited.asp

 

[basti1012]

@Sailor sagt es ja schon , und wenn du in deiner jquery.mobile-1.4.5.min.css rein schauen tust sieht man das genau da deine besuchten Links die Farbe bekommen. Dann solltest du vieleicht versuchen die mit !important zu überschreiben

 

[rschmidt]

Hallo,

leider stehe ich immer noch auf dem schlauch....

Genau das was Sailor empfiehlt, habe ich doch gemacht:

header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited
{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    display: block;
}

Oder ist da noch ein Fehler drin?

Ich dachte, es zählen immer die einträge aus der CSS Datei, die zu letzt importiert wird. Da die jquerymobil vor meine style.css geladen wird, müsst doch eigentlich meine Einträge ziehen, oder?

Vielen Dank für Eure Hilfe....

 

[Sailor]

Dann teste mal bitte in deiner 'style.css'

header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited
{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    color: #fff !important;
    text-decoration: none;
    display: block;
}