Aide sur les sélecteurs CSS (jQuery datepicker)

Question

Je suis en train d'essayer de styler le datasteur jQuery. Je ne peux pas utiliser un thème jQuery car cela détruit le reste de mon site.

J'ai tout prévu de travailler pour un bit - en soulignant le jour actuel.

Le problème que je vais avoir est que lorsque le datepicker charge d'abord le jour en cours est affiché comme suit:

<td class="ui-datepicker-days-cell-over ui-datepicker-today"> 
    <a class="ui-state-default ui-state-highlight ui-state-hover" href="#">14</a> 
</td> 

Lorsque l'utilisateur passe au-dessus de toute autre jour, le ui-state-hover le jour en cours est supprimée, puis la journée en cours met en avant les travaux ok:

<td class="ui-datepicker-days-cell-over ui-datepicker-today"> 
    <a class="ui-state-default ui-state-highlight" href="#">14</a> 
</td> 

Mon CSS pour l'état de vol stationnaire est comme:

.ui-widget-content .ui-state-hover { ... }

et en charge cela écrase mon ui-state-highlight qui met en évidence le jour en cours.

J'ai essayé de le faire:

.ui-widget-content .ui-state-highlight .ui-state-hover { ... }

que je croyais correspondre de préférence comme il est un sélecteur plus spécifique, mais il ne fonctionne pas.

Donc la question est, comment puis-je faire .ui-state-highlight .ui-state-hover déroger .ui-state-hover afin que je ne perds pas mon point culminant sur le vol stationnaire?

Merci.

Answer 1

Pas idéal, mais vous pouvez ajouter le !important à chacun de vos styles dans votre sélecteur pour la remplacer wity votre propre style:

.ui-widget-content .ui-state-hover { 
    color: '#00ff00' !important; 
} 

Answer 2

Vous pouvez essayer d'ajouter l'élément afin d'élever sa place sur le hierachy td.ui-widget-content td.ui-state-hover par exemple. En outre, peut-être pas la solution la plus élégante, mais en ajoutant un style en ligne ou sur la page html réelle comme en-tête dans les balises <style></style aurait préséance sur toutes les autres feuilles de style à condition que ce soit le dernier appelé.