#jquery #jquery-ui #dom
#jquery #jquery-пользовательский интерфейс #dom
Вопрос:
Я поддерживаю небольшое собственное веб-приложение, созданное с использованием jQueryUI.
Я хочу, чтобы текстовая область использовала другой стиль шрифта, чем стиль шрифта для всей темы, указанный в сгенерированном jquery-ui-1.8.2.custom.css.
Я, конечно, могу отредактировать файл css и указать стиль для текстовой области глобально, но это затруднило бы поддержание темы, поскольку, если тема редактируется с помощью themeroller, этот стиль нужно снова исправить.
Итак, я подумал, что добавление нового класса в локальный style.css и пусть textarea.testscript переопределяет глобальный стиль текстовой области, а затем использует class=»testscript» в текстовой области, будет работать, но нет…
По какой-то причине jQueryUI добавляет стили по умолчанию поверх применяемого стиля класса, согласно инспектору DOM в chrome, применяется следующая иерархия:
element.style {
}
Соответствующие правила CSS
jquery-ui-1.8.2.custom.css:52
.ui-ввод виджета, .ui-выбор виджета, .ui-текстовая область виджета, .ui-кнопка виджета {
семейство шрифтов: Helvetica, Arial, без засечек;
размер шрифта: 1em;
}
style.css:101
textarea.testscript {
семейство шрифтов: «Courier New», Courier, моноширинный;
размер шрифта: 12 пикселей;
цвет фона: серый;
ширина: 100%;
высота: 50%;
}
В иерархии DOM единственным активным классом для элемента textarea является class=»testscript», родительский элемент выше в DOM имеет класс ui-widget, но я думал, что стиль, указанный классом element, переопределит стили, унаследованные от родительских классов, я не прав?
Редактировать
Исправлено, изменен порядок включения таблиц стилей в заголовок HTML исправлено, теперь стиль class=»testscript», объявленный в style.css, имеет приоритет над ui-widget .textarea, объявленным в jquery-ui-1.8.2.custom.css.
Это не сработало
<link rel="stylesheet" type="text/css" href="style.css" >
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/>
Это работает
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/>
<link rel="stylesheet" type="text/css" href="style.css" >
Ответ №1:
Просто вопрос специфики ( http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html ). Вы действительно должны всегда включать свои пользовательские стили ПОСЛЕ любых файлов фреймворка именно по этой причине. Таким образом, перезапись стилей становится проще и интуитивно понятнее.