CSS: Wie überschreibe ich diese Regel?

[woodfighter]

Tach,

indem du einen Selektor mit höherer Spezifität angibst, du könntest also aus deinem Beispiel also z.B. einen ID- Klassen-, oder Element-Selektor hinzufügen, je nachdem wie dein restliches HTML aussieht.

Ich habe es so versucht, aber das hatte keine Auswirkungen.

    article#tabnavigation.ui-state-hover,
    article#tabnavigation..ui-widget-content,
    article#tabnavigation..ui-state-focus {
    background: #330033; 
	font-weight: normal; 
	color: #FFFFFF; 
	border: 0px;
	outline: none; 
    }

Was ist daran falsch?

du selektierst etwas, das im HTML nicht existiert; ich habe es jetzt nur für den Hover-Zustand untersucht, aber ich vermute mal, dass es für die anderen genauso gilt (zumindest, wenn du nur einen statt zwei Punkte setzt). Dein CSS selektiert ein Element vom Typ article mit der ID tabnavigation und der Klasse ui-state-hover. JQuery-UI setzt die Klasse ui-state-hover aber nicht auf das article-Element, sondern auf das li-Element (das ist ja auch dasjenige, dessen Aussehen sich ändert). Du brauchst also zusätzlich den Nachfahrensselektor, denn du willst ja ein Element mit der Klasse ui-state-hover, das sich innerhalb eines Elements mit der ID tabnavigation befindet, selektieren:

#tabnavigation .ui-state-hover

Oder du machst es wie Gunnar vorgeschlagen hat und sorgst einfach dafür, dass das JQuery-UI-CSS vor deinem CSS im Quelltext ist, dann reicht es auch, wenn du einfach den selben Selektor nutzt, um den vorherigen zu überschreiben:

.ui-state-hover

Das gilt dann allerdings für alle entsprechenden UI-Elemente, nicht nur diejenigen unterhalb von #tabnavigation.

mfg
Woodfighter