Як вказати порядок класів 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,

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

Розгорніть фрагмент

— ТравісВ
джерело