Применение цвета к: link, a: hover, a: visit и a: active нарушает тематику .button () jQuery?

Question

site.css:

a:link, a:visited, a:hover, a:active
{
    color: #0033CC;
    text-decoration: none;
}

на странице:

<a href="/foo/boo">test link</a>

JQuery:

$('a').button();

jQuery прекрасно создает кнопку для «тестовой ссылки», но некоторые цвета текста в разных состояниях кнопки определены в site.css, а не в теме jQuery.

Таким образом, смысл в том, чтобы обеспечить некоторый внешний вид по умолчанию для всех ссылок на странице, не затрагивая тематику jQuery. Что я делаю не так?

Answer 1

Проблема связана с псевдоэлементами: ссылка,: посещено,: активно и: наведите курсор мыши (со страницы), перекрывающих стили jquery. Стили для псевдоэлементов имеют более высокий приоритет, чем стили для классов.

Лично у меня пока нет хорошего решения для этого. Вы можете отредактировать в некоторых тегах стиля, чтобы ваши a.:visited a.:hover и a.:active были правильными цветами, хотя это правильная боль, когда вы используете themeroller.

лично я думаю, что themeroller должен позаботиться об этом, генерируя стили, которые заставляют кнопки показывать правильные стили, даже когда они находятся под этими конкретными псевдоэлементами.

больше правки: стили, которые вы хотите добавить:

a.ui-button: ссылка, a.ui-button: посещения ... вы хотите добавить их в первую строку в разделе статистики взаимодействий, чтобы они начинали строку, которая обычно имеет .ui -state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default

a.ui-button: наведите на 3-ю строку, обычно это .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus

Не уверен, если это необходимо, но для полноты я добавил

a.ui-button: active до 5-й строки, обычно это .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

это заставляет кнопки появляться правильно, насколько я могу судить. Но, как я уже сказал, это правильная боль, если вы используете themeroller и допускаете использование нескольких тем.

Answer 2

Он работает, как задумано, указав его на странице, он имеет приоритет над определением jQuery.

http://www.w3schools.com/css/css_howto.asp

Вообще говоря, мы можем сказать, что все стили будут "каскадом" в новый «виртуальная» таблица стилей по следующим правила, где номер четыре имеет высший приоритет:

1. Браузер по умолчанию
2. Внешняя таблица стилей
3. Внутренняя таблица стилей (в разделе head)
4. Встроенный стиль (внутри элемента HTML)

Если вы хотите, вы можете изменить свой код на:

Javascript:

$("button").button();

HTML:

<button>Button label</button>