Как указать порядок классов CSS?

113

Я немного запутался в CSS и classатрибуте. Я всегда думал, что порядок, в котором я указываю несколько классов в значении атрибута, имеет значение. Более поздний класс может / должен перезаписать определения предыдущего, но, похоже, это не работает. Вот пример:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

Я ожидал, что третий пример с class="basic extra"должен иметь синюю рамку, так как дополнительная указанная граница перезапишет границу из базовой.

Я использую FF 3 в ubuntu 9.04

html css

— Тим Бют
источник

246

Порядок перезаписи атрибутов определяется не порядком, в котором классы определены в classатрибуте, а тем, где они появляются в CSS.

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

Развернуть фрагмент

Текст в поле divпоявится green, а не red; потому .myClass2что в определении CSS ниже, чем .myClass1. Если бы я classпоменял местами порядок имен классов в атрибуте, ничего бы не изменилось.

— Зойдберг
источник

14

Я не понимаю, зачем они это реализовали вот так. Как ни странно, это мое мнение и в отношении большинства других возможностей CSS.

— byxor

@ потому что правила каскадные . они применяют форму сверху вниз, слева направо. имеет смысл для меня

— O-9

Я действительно заметил в Bootstrap, что мой собственный класс «back-to-top» игнорировался внутри тега <p>. Но затем, когда я перевернул их и поставил свой собственный класс первым, были приняты функции как моего класса, так и класса Bootstrap: <p class = "back-to-top text-center">. Есть идеи, почему?

— Питер Дж. Уильямс

27

Порядок классов в атрибуте не имеет значения. Все классы в classатрибуте одинаково применяются к элементу.

Вопрос в том, в каком порядке правила стилей появляются в вашем .css файле. В вашем примере, .basicидет после, .extraпоэтому .basicправила будут иметь приоритет везде, где это возможно.

Если вы хотите , чтобы обеспечить третью возможность (например, что это , .basicно что .extraправила должны все еще применяются), вам нужно придумать другой класс, .basic-extraможет быть, который четко предусматривает , что.

— VoteyDisciple
источник

4

Это можно сделать, но с селекторами нужно проявить немного творчества. Используя селекторы атрибутов, вы можете указать такие вещи, как «начинается с», «заканчивается на», «содержит» и т. Д. См. Пример ниже с использованием той же разметки, но с селекторами атрибутов.

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

Развернуть фрагмент

— TravisV
источник