Приоритет CSS классов?

Я использую библиотеку Twitter Bootstrap версии 2.0.3 для создания прототипа веб-сайта. В настоящее время я использую предоставленный модальный элемент управления, хотя и встроенный, для отображения формы:

<code><div class="modal in-layout span6 offset3">
    <div class="modal-header">
        <h3>Header</h3>
    </div>
    <div class="modal-body">
        <p>Hello</p>
    </div>
    <div class="modal-footer">

    </div>
</div>
</code>

Я написал свой собственный селектор, чтобы использовать мой собственный класс,.in-layout:

<code>div.modal.in-layout {
    position: static;
    top: auto;
    left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
</code>

Проблема в том, что правила CSS сопоставляются в очень неудобном порядке:

enter image description here

По сути, мне нужно.span6 а также.offset3 классы применять с более высоким приоритетом, чем.modal для того, чтобы дать мой<div> поле 260 пикселей и ширина 460 пикселей.

Есть ли способ, которым я могу сделать это?

 kei11 мая 2012 г., 21:43
Вы размещаете их в правильном порядке? Если они имеют одинаковый вес, последнее правило будет иметь приоритет. Если вы абсолютно хотите убедиться, что правило переопределяет все остальные правила, используйте!important.

Ответы на вопрос(2)

.modal правила или повторите правила, которые вам нужны от.span6 а также.offset3 в вашемdiv.modal.in-layout.

Решение Вопроса

Есть 3 способа заставить правило переопределить другое (перечислены самые сильные и самые слабые):

Importance, e.g. rules in author stylesheets will override those specified in user-agent stylesheets, using !important rule will override any other rule. Specificity, a rule will override any other rules with less specific selectors. Here's an article on the subject. Basically, element.class is more specific than .class, but less specific than #id. Order, a rule will override any other rules which came before it.

Кроме того, я обнаружил некоторые другие проблемы с вашим кодом. При разработке сайта лучше всего использоватьsemantics определения («что это значит»), а неform related условия («как это должно выглядеть»).

Чтобы конкретно ссылаться на ваш код, называйте имена классовspan6, in-layout а такжеoffest3где вы должны иметь что-то вродеwarning-modal, information-header или жеerror-footer, которые передают значение элемента (в конце концов, единственная цель HTML - датьcontext на ваш текст).

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

 11 мая 2012 г., 22:58
@TKKocheran: я перфекционист. Это не значит, что у меня бесконечное время. Мой способ кодирования на самом деле экономит время. Доверьтесь мне. Не все из них & lt; RETRACTED & gt; CSS-фреймворки и еще много чего.
 Naftuli Kay11 мая 2012 г., 22:53
Вы также должны иметь бесконечное количество времени, чтобы согласиться с этим неустанным перфекционизмом;)
 Naftuli Kay11 мая 2012 г., 22:14
Я использую Bootstrap, который предоставляет эти классы. Вы должны сообщить им об этом на Github об их ужасной политике именования классов :)
 11 мая 2012 г., 22:16
@TKKocheran: Лично я не пользуюсь Twitter Boostrap, я пишу свой собственный код с нуля. Таким образом, я получаю более качественные результаты.

Ваш ответ на вопрос