Перезаписать селекторы классов CSS без! - PullRequest
Новая
       7

Перезаписать селекторы классов CSS без!

5 голосов
/ 29 сентября 2010

Я просто пишу диалоговое окно JavaScript для веб-приложения.Проблема в том, что пользователи могут создавать свои собственные темы для веб-приложения, которые могут включать селекторы css элементов (h1 {...}, div {...} и т. Д.), Которые перезаписывают мое форматирование css для диалогового окна пользовательского интерфейса.Диалог - это элемент div, который отформатирован с помощью селектора классов (идентификатор дозы не работает, поскольку этот диалог может появляться несколько раз).Есть ли способ остановить селектор элементов стиля шаблона пользователя, влияющий на диалог пользовательского интерфейса, не используя огромный стиль сброса CSS и не используя !important для каждого стиля диалога пользовательского интерфейса?Как библиотеки UI, такие как jQuery UI style, используют диалоговые окна?

Например, пользовательская тема включает в себя: 

input {color:nuts; height:bananas; width:crazy; background:morenuts; }

CSS пользовательского интерфейса: 

.ui_modal_wrap input {color:red; border:1px solid black;}

HTML пользовательского интерфейса: 

<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>

Проблема по-прежнему заключается в том, что мне нужно использовать огромный остаток CSS для .ui_modal_wrap, потому что вы не можете написать CSS со всеми атрибутами, которые может применить пользователь (в этом примере элемент height и width мог бывсе еще нарушает стиль, потому что доза пользовательского интерфейса не включает высоту и ширину.

Ответы [ 3 ]

12 голосов
/ 29 сентября 2010

В общем, вы должны знать, что правила применяются (если оба находятся во внешних таблицах стилей) с specificity rules.

Как правило, есть оценка, о которой вы можете подумать, и применяется правило, применяемое к элементу с наивысшей оценкой.

В цепочке селекторов каждый тип элемента стоит один, классы - 10, а идентификатор - 100 баллов.

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

Так что, как правило, просто сделайте правила для конкретной страницы (которые стилизируют остальную часть вашей страницы) менее специфичными, и позвольте CSS пользовательского интерфейса вступить во владение. Кроме того, вы всегда можете поместить разметку пользовательского интерфейса в «супер» бит HTML, например: 

<div id="super">
    <div id="super2">
        //your UI stuff
    </div>
</div>

А затем «пространство имен» CSS для пользовательского интерфейса, поместив #super #super2 перед каждым правилом в этой таблице стилей.

0 голосов
/ 29 сентября 2010

Вам понадобится второй набор стилей, который использует более конкретные селекторы, которые будут переопределять элементы, установленные стилями пользователя. Использование !important - это только один из способов сделать это. Посмотрите CSS Specificity для получения дополнительной информации.

HTML 

<div class="ui-dialog">
    <h1>Dialog Heading</h1>
</div>

CSS: 

div.ui-dialog h1 {
    color: red;
}

jQuery UI реализует это, предоставляя вам возможность указать «область» CSS при использовании Theme Roller. Вы можете установить область действия на .system-scope, а затем в HTML-оболочке все элементы пользовательского интерфейса в элементе с классом system-scope.

0 голосов
/ 29 сентября 2010

Там нет никакого способа гарантировать это вообще, если:

  1. Вы можете отфильтровать CSS пользователя и удалить все! Важные объявления
  2. вам гарантировано, что ваш код CSS вставлен после их. Затем вы можете использовать! Важный для всего, чтобы обеспечить более высокую специфичность вашего CSS.

чтение css специфичность

...