Переопределение по умолчанию jquery css?

Question

Я пытаюсь сузить дескриптор виджета слайдера jQuery. Я создал этот CSS:

.ui-slider-handle { 
    width: 10px; 
} 

Какой инспектор DOM говорит мне игнорируется в пользу UI CSS JQuery.

Как я могу присвоить более высокий приоритет? Единственный способ идентифицировать дескриптор ползунка, поскольку он создан функцией jQuery (.slider()) и фактически не находится в файле .html, заключается в использовании кода для присвоения ему идентификатора после, сделав его с помощью jQuery , а затем надеется, что CSS применяется, или вручную добавляет атрибут width с кодом. Они кажутся неэлегантными.

Каков наилучший способ?

Answer 1

Он переопределяется CSS jQuery UI, потому что есть больше specificity. Если вы посмотрите на код, который у вас есть, вам просто нужно будет иметь больше, и он переопределит его.

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */ 

---

Использование !important также справиться с этим, но обычно говорят, что вы не хотите использовать, если нет действительно никакого способа обойти это. Например, если у вас есть встроенные стили для элемента, и вы хотите превзойти их в своей таблице стилей. В строковых стилях даны баллов, которые невозможно было бы превзойти.

Подробнее здесь http://css-tricks.com/specifics-on-css-specificity/

Answer 2

Вы можете вручную изменять любой из стилей по умолчанию JQuery или JQueryUI в вашем собственном CSS, если вы попытаетесь достаточно трудно. Есть несколько проблем с этим способом, хотя:

• Как вы обнаружили, что каскад делает CSS по умолчанию имеет приоритет в (возможно, удивительно) способах, так что вы должны использовать хаки - как !important, или избыточные теги в ваших селекторах, например htmlbody - чтобы ваши стили «били» JQuery.
• Более проблематично то, что многие из виджетов, Menu являются основным нарушителем (но есть и другие), динамически создают новые селекторы при инициализации. Чтобы переопределить те стили, вы должны использовать Firebug или аналогичный инструмент на странице после написания JS, чтобы определить новые имена селекторов и добавить их в свою таблицу стилей.

Правильный способ сделать Это использовать инструмент ThemeRoller, чтобы создать единый собственный «пакет» CSS, который сразу меняет все стили. Бонус: поскольку вы можете видеть, как ваши пользовательские стили влияют на все виджеты одновременно, проще создать единый вид вашей страницы.