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

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

99 голосов
/ 24 августа 2009

Я немного запутался в 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

Ответы [ 3 ]

218 голосов
/ 24 августа 2009

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

.myClass1 {font-size:10pt;color:red}
.myClass2 {color:green;}
<div class="myClass2 myClass1">Text goes here</div>

Текст в div будет выглядеть зеленым, а не красным, потому что myClass2 находится дальше в определении CSS, чем мой class1. Если бы я поменял местами порядок имен в атрибуте класса, ничего бы не изменилось.

26 голосов
/ 24 августа 2009

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

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

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

1 голос
/ 05 октября 2018

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

[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"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...