Warum überschreibt dieses css dieses andere?

Question

Ich habe 2 CSS-Dateien in meiner Seite:

1. Site.css
2. jquery-ui.css

Site.css UNTER dem jquery-ui css aufgeführt wird

I habe einen Link, der so auf meiner Seite aussieht:

<a class='closeClueTipLink'>close</a> 

und das Problem ist, dass die li nk wird anstelle des normalen blauen Textes schwarz angezeigt. Wenn ich Firebug verwenden, herauszufinden, warum, ich sehe dies:

Ich verstehe nicht, warum .ui-Widget-Inhalt (die die Farbe # 222222 hat) ist zwingende .closeClueTipLink (was als Farbe: blau) gegeben, dass site.css unterhalb der jquery ist.

Irgendwelche Ideen oder Vorschläge, warum diese Bestellung geschieht?

Answer 1

[nicht empfohlen] Da nur ein a Wähler gibt es nach .ui-widget-content:

.ui-widget-content a 

es mehr als specific.closeClueTipLink Etwas herstellen, obwohl .closeClueTipLink in einem späteren Sheet gefunden wird.

Sie können dies leicht ausgleichen, indem Sie der anderen Regel denselben Typselektor hinzufügen, sodass Sie a.closeClueTipLink erhalten, wodurch beide Selektoren gleichermaßen spezifisch sind (1 Typ und 1 Klasse). Dann gilt die Regel, die später definiert und geladen wird, und Ihr Linktext wird blau sein.

Answer 2

Da .ui-content-content a { } nach dem vorherigen Stil geladen wird .closeClueTipLink.

Ich bin ziemlich sicher jquery...tom.css wird nach site.css geladen, so dass die später definierten Stile überschreiben zuvor definierten Stilen.

Es gibt Möglichkeiten, wie Sie sind, dieses Problem ändern:

1. Pinpoint der Wähler wie .ui-content-content a.closeClueTipLink
2. Verwendung !important am Ende der Farbe defination. color: #222 !important;

Answer 3

Quick Fix:

hinzufügen ein "a" vor Ihrer Klassenauswahl:

a.closeClueTipLink { 

Erläuterung:

Es mit Specificity [details] zu tun hat.

Die .ui-widget-content a ist mehr "spezifisch", weil sie eine Klasse UND ein Element im Gegensatz zu Ihren bezieht, die nur eine Klasse referenziert. Daher überschreibt die .ui-widget-content a alles, was weniger spezifisch ist, unabhängig vom Ort/der Position des Codes. '

Durch Hinzufügen eines "a" vor Ihrem Selektor, Sie machen es auch ein Element und eine Klasse verweisen, daher ist es nicht mehr weniger spezifisch und wird Ort zu bestimmen.

Beispiel:

/* css */ 
div p { color: red; } 
p { color: blue; } 

<!-- html --> 
<div><p>Text</p></div> 

Der Text im obigen Absatz wird rot, weil das erste CSS-Element präziser als der zweite ist.

Answer 4

.ui-widget-content a ist spezifischer als .closeClueTipLink so wird es es egal overide welcher Reihenfolge sie in platziert werden.

Änderung es

a.closeClueTipLink