CSS !wichtig, nicht Vorrang haben?

Habe ich folgende dom-Struktur:

<div class="ui-tabs">
<ul>
    <li class="ui-state-default ui-tabs-selected ui-state-active">
         <a href="#">Text</a>
    </li>
</ul>

Und die folgenden CSS-markup:

.ui-tabs .ui-state-active {
background: #084;
color: #E6EFEA !important;
}

a:link {
color: #00C;
}

Ich nicht die erste Farbe (E6EFEA) Vorrang. Ich hab es auf FireFox und Chrome, Chrome zeigt auch die a:link die Eigenschaft zerkratzt aus ... als wenn eine andere Farbe Vorrang haben, aber immer noch macht blau (00C). Nur um sicher zu gehen habe ich raus genommen jeder andere #00C refeence in der CSS-Datei. Irgendwelche Ideen?

Ich habe auch ein grobes Beispiel auf JSBin.

InformationsquelleAutor chum of chance | 2010-11-10
  1. 10

    !important funktioniert nur, wenn das Attribut angewendet wird auf das gleiche element. In diesem Fall sind Sie die Anwendung, um die <a> - element des parent, und es ist wird es gesetzt (werfen einige text außerhalb der <a> sich selbst davon zu überzeugen).

    Wenn Sie möchten, überschreiben Sie die Farbe der <a> element selbst, Ihre CSS-Regel anwenden müssen, um die <a>, nicht Vorfahren.

    • Genau das, was ich sagen wollte! Gute Erklärung.
    InformationsquelleAutor cdhowie
  2. 1
    .ui-tabs .ui-state-active a:link {
color: #E6EFEA !important;
}

    Sollte dies tun, die Tat.

    Müssen Sie Ihre Farbe auf das a-tag nicht .ui-state-active-Klasse.

    InformationsquelleAutor Allan Kimmer Jensen
  3. 0

    Müssen Sie angeben, auch :link 

    .ui-tabs .ui-state-active:link {
    background: #084;
    color: #E6EFEA !important;
}
    • HM, ich glaube nicht, dass dies funktionieren wird.
    • Ich bin mir ziemlich sicher, dass dies nicht so arbeiten .ui-state-active ist die Eltern-und ist nicht ein <a> tag.
    • ops sorry für die Schreibfehler. Ich vergaß ein " a " wie jensen Lösung
    InformationsquelleAutor
  4. 0

    In dieser Art und Weise Sie die Farbe der Punkt auf der Liste...

    versuchen, diesen code:

    .ui-tabs .ui-state-active a {
    background: #084;
    color: #E6EFEA;
}
    InformationsquelleAutor Andrea Turri
Schreibe einen Kommentar