Bagaimana cara menentukan urutan kelas CSS?

113

Saya sedikit bingung tentang CSS dan classatributnya. Saya selalu berpikir, urutan beberapa kelas yang saya tentukan dalam nilai atribut memiliki arti. Kelas selanjutnya bisa / harus menimpa definisi dari sebelumnya, tetapi ini sepertinya tidak berhasil. Berikut contohnya:

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

Saya harapkan, contoh ketiga dengan class="basic extra"harus memiliki batas biru, karena dalam batas yang ditentukan ekstra akan menimpa batas dari dasar.

Saya menggunakan FF 3 di ubuntu 9.04

html css

— Tim Büthe
sumber

246

Urutan penimpaan atribut tidak ditentukan oleh urutan kelas yang ditentukan dalam classatribut, melainkan di mana mereka muncul di CSS.

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

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

Luaskan cuplikan

Teks di divakan muncul green, dan bukan red; karena .myClass2lebih jauh ke bawah dalam definisi CSS daripada .myClass1. Jika saya menukar urutan nama kelas di classatribut, tidak ada yang akan berubah.

— Zoidberg
sumber

14

Saya tidak mengerti mengapa mereka menerapkannya seperti ini. Lucunya, itu juga pendapat saya untuk sebagian besar hal lain yang dapat dilakukan CSS.

— byxor

@ karena karena aturan menurun . mereka menerapkan formulir dari atas ke bawah, dari kiri ke kanan. masuk akal bagi saya

— O-9

27

Urutan kelas dalam atribut tidak relevan. Semua kelas di classatribut diterapkan sama ke elemen.

Pertanyaannya adalah: dalam urutan bagaimana aturan gaya muncul di file .css Anda. Dalam contoh Anda, .basicdatang setelah .extrasehingga .basicaturan akan diutamakan jika memungkinkan.

Jika Anda ingin memberikan kemungkinan ketiga (misalnya, bahwa itu .basictapi bahwa .extraaturan harus tetap berlaku), Anda harus menciptakan kelas lain, .basic-extramungkin, yang secara eksplisit menyediakan untuk itu.

— VoteyDisciple
sumber

4

Ini bisa dilakukan, tetapi Anda harus sedikit kreatif dengan penyeleksi Anda. Dengan menggunakan pemilih atribut, Anda dapat menentukan hal-hal seperti "dimulai dengan", "diakhiri dengan", "berisi", dll. Lihat contoh di bawah ini menggunakan markup yang sama, tetapi dengan pemilih atribut.

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

Luaskan cuplikan

— TravisV
sumber