CSS sınıflarının sırası nasıl belirlenir?

113

CSS ve classöznitelik konusunda biraz kafam karıştı . Her zaman, öznitelik değerinde birden çok sınıf belirttiğim sıranın bir anlamı olduğunu düşündüm. Sonraki sınıf, öncekinin tanımlarının üzerine yazabilir / yazmalıdır, ancak bu işe yaramıyor gibi görünüyor. İşte bir örnek:

<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"Ekstra belirtilen kenarlık temelden sınırın üzerine yazacağından, ile üçüncü örneğin mavi bir kenarlığı olmasını beklerdim .

Ubuntu 9.04'te FF 3 kullanıyorum

html css

— Tim Büthe
kaynak

246

Özniteliklerin üzerine yazılma sırası, classöznitelikte sınıfların tanımlanma sırasına göre değil , bunun yerine CSS'de nerede göründüklerine göre belirlenir.

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

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

Snippet'i genişlet

İçindeki metin divgörünecek greenve görünmeyecektir red; çünkü .myClass2CSS tanımında daha aşağıdadır .myClass1. classÖznitelikteki sınıf adlarının sırasını değiştirirsem hiçbir şey değişmez.

— Zoidberg
kaynak

14

Bunu neden böyle uyguladıklarını anlayamıyorum. Tuhaf bir şekilde, CSS'nin yapabileceği diğer birçok şey için de benim fikrim.

— byxor

@ çünkü kurallar basamaklıdır . formu yukarıdan aşağıya, soldan sağa uygularlar. bana mantıklı geliyor

— O-9

27

Öznitelikteki sınıfların sırası ilgisizdir. Nitelikteki tüm sınıflar classöğeye eşit olarak uygulanır.

Soru şudur: .css dosyanızda stil kuralları hangi sırayla görünür? Örneğinizde, .basicsonra gelir , .extraböylece .basicmümkün olan her yerde kurallar öncelikli olacaktır.

Eğer (öyle ki mesela üçüncü olasılık sağlamak istiyorsanız .basicama bu .extrakuralları hala geçerli olmalıdır), Başka bir sınıf icat etmek gerekir .basic-extraaçıkça bunun için sağlayan, belki.

— VoteyDisciple
kaynak

4

Bu yapılabilir, ancak seçicilerinizle biraz yaratıcı olmanız gerekir. Öznitelik seçicilerini kullanarak, "şununla başlar", "ile biter", "içerir" vb. Şeyler belirtebilirsiniz. Aynı işaretlemenizi kullanan, ancak öznitelik seçicilerle aşağıdaki örneğe bakın.

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

Snippet'i genişlet

— TravisV
kaynak