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

Я немного смущен 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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

[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"/>