Я знаю, что селектор CSS с наивысшей специфичностью имеет приоритет (т.е. .classname < #idname).
Я также знаю, что если вещи имеют одинаковую специфичность, то последний оператор имеет приоритет:
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
Является ли упорядочение классов HTML в элементе DOM влияющим на приоритет выражения?
Я должен немного не согласиться с ответами Джона и Уотсона, так как...
Ваш вопрос:
Является ли упорядочение классов CSS в элементе DOM влияющим на приоритет оператора?
Что зависит от данного утверждения.
Заказ HTML не типичен.
Следующие эквиваленты, когда речь идет о прямом вызове класса (т.е. .class1 или .class2) или комбинированном вызове (т.е. .class1.class2 или .class2.class1):
<div class="class1 class2"></div>
<div class="class2 class1"></div>
Случаи, в которых утверждение Приоритет выше HTML может быть затронут на основе HTML-кода
Основное место, где упорядочивается в HTML, - это использование селекторов атрибутов в вашем CSS.
Пример 1 Fiddle, используя следующий код для поиска значения атрибута, не будет иметь никакого изменения цвета шрифта, и каждый div будут иметь разные свойства из-за упорядочения классов:
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
Пример 2 Fiddle, используя следующий код, который ищет совпадение с началом значения атрибута, не будет иметь никакого изменения цвета шрифта для второго div, и каждый div будет иметь разные свойства из-за упорядочения классов:
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
Пример 3 Fiddle, используя следующий код, который ищет совпадение с окончанием значения атрибута, не будет иметь никакого изменения цвета шрифта для первого div, и каждый div будет иметь разные свойства из-за упорядочения классов:
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
Чтобы быть ясным, в вышеприведенных случаях то, что затрагивается в отношении "приоритета оператора", действительно зависит от того, действительно ли оператор применяется или не относится к элементу. Но так как приложение или нет в некотором смысле, основной приоритет, и поскольку вышеприведенное является случаем, когда такое приложение фактически основано на упорядочении классов в элементе HTML Dom (а не в присутствии или отсутствии класса) Я думал, что стоит добавить это в качестве ответа.
Это мысль, которая возникает у меня на основе комментария BoltClock. Рассмотрим только два класса, которые используются для стилизации элементов, основанных на любых факторах, которые считаются критическими для разных стилей. Эти два класса теоретически могут заменить использование одиннадцати разных отдельных классов, используя комбинацию селекторов атрибутов (на самом деле, как будет отмечено позже, возможности практически безграничны с одним классом, но я обсужу это в тот момент, когда это пост - упорядочение нескольких классов). Для этих двух классов мы можем по-разному стилизовать элементы следующим образом:
Предполагая эти комбинации HTML
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
Возможности CSS
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
Если я правильно вычислил, 3 класса могут дать не менее 40 комбинаций опций селектора.
Чтобы прояснить мою заметку о "неограниченных" возможностях, учитывая правильную логику, один класс может потенциально внедрить в нее комбинации кода, которые просматриваются с помощью синтаксиса [attr*=value].
Сложно ли это управлять? Возможно. Это может зависеть от логики того, как именно это реализовано. То, что я пытаюсь выявить, заключается в том, что с CSS3 возможно, что упорядочение классов будет значительным, если вы захотите его и запланируете для него, и не может быть ужасно неправильно использовать силу CSS таким образом.
Нет, это не так. соответствующая часть стандарта W3C не упоминает порядок появления для классов.
Нет, это не так, как вы сказали, если два правила имеют одинаковую специфичность, то будет применяться тот, который приходит позже в вашем CSS.