Jak określić kolejność klas CSS?

113

Jestem trochę zdezorientowany co do CSS i classatrybutu. Zawsze myślałem, że kolejność, w której określam wiele klas w wartości atrybutu, ma znaczenie. Późniejsza klasa może / powinna nadpisywać definicje poprzedniej, ale to nie działa. Oto przykład:

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

Spodziewałbym się, że trzeci przykład z class="basic extra"powinien mieć niebieską ramkę, ponieważ dodatkowo określona ramka nadpisze ramkę z podstawowego.

Używam FF 3 na Ubuntu 9.04

html css

— Tim Büthe
źródło

246

Kolejność nadpisywania atrybutów nie jest określana przez kolejność, w jakiej klasy są zdefiniowane w classatrybucie, ale zamiast tego, gdzie pojawiają się w CSS.

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

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

Rozwiń fragment

Tekst w divpojawi się green, a nie red; ponieważ .myClass2jest dalej w definicji CSS niż .myClass1. Gdybym miał zamienić kolejność nazw klas w classatrybucie, nic by się nie zmieniło.

— Zoidberg
źródło

14

Nie rozumiem, dlaczego zaimplementowali to w ten sposób. Co zabawne, to moja opinia na temat większości innych rzeczy, które CSS może zrobić.

— byxor

@ ponieważ reguły są kaskadowe . stosują się od góry do dołu, od lewej do prawej. ma dla mnie sens

— O-9

27

Kolejność klas w atrybucie nie ma znaczenia. Wszystkie klasy w classatrybucie są stosowane jednakowo do elementu.

Pytanie brzmi: w jakiej kolejności reguły stylów pojawiają się w twoim pliku .css. W twoim przykładzie .basicnastępuje po, .extrawięc .basicreguły będą miały pierwszeństwo, gdy tylko będzie to możliwe.

Jeśli chcesz zapewnić trzecią możliwość (np. To, .basicże .extrareguły powinny nadal obowiązywać), .basic-extrabyć może będziesz musiał wymyślić inną klasę , która wyraźnie to przewiduje.

— VoteyDisciple
źródło

4

Można to zrobić, ale musisz wykazać się trochę kreatywnością za pomocą swoich selektorów. Używając selektorów atrybutów, możesz określić takie rzeczy, jak „zaczyna się od”, „kończy się na”, „zawiera” itd. Zobacz przykład poniżej, używając tych samych znaczników, ale z selektorami atrybutów.

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

Rozwiń fragment

— TravisV
źródło