Jak określić kolejność klas CSS?

Jestem trochę zdezorientowany co do CSS i atrybutu class. 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 poprzednich, ale to nie działa. Oto przykład:Jak określić kolejność klas CSS?

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

Spodziewam się, trzeci przykład z class="basic extra" powinien mieć niebieskie obramowanie, ponieważ w dodatkowym określonej granicy byłoby zastąpić granicy z podstawowym.

Używam FF 3 na Ubuntu 9.04

Źródło

2009-08-24 Tim Büthe

182

Kolejność, w jakiej atrybuty klasa są zastępowane nie jest określona przez kolejność klas są zdefiniowane w atrybucie klasy, lecz w których pojawiają się one w css

.myClass1 {font-size:10pt;color:red} 
.myClass2 {color:green;}

HTML

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

Tekst w dziale będzie zielony, a nie czerwony, ponieważ myClass2 znajduje się dalej w definicji CSS niż moja klasa1. Gdybym zamienić zamawianie nazw klas w atrybucie klasy, nic by się nie zmieniło.

Źródło

2009-08-24 11:01:40 Zoidberg

+12

Wow, naprawdę to źle. Zadziwiające, jak długo mogłem to zrobić, nie zdając sobie z tego sprawy :-) –

Tak, to nie jest oczywiste i zrobiłem to samo, co zrobiłeś. Zajęło mi to godziny, żeby to rozgryźć. – Zoidberg

Nigdy nie wiedziałem o tym :) Świetna wskazówka –

Kolejność klas w atrybucie ma znaczenia. Wszystkie klasy w atrybucie class są stosowane w równym stopniu do elementu.

Pytanie brzmi: w jakiej kolejności styl reguł pojawia się w pliku .css. W twoim przykładzie .basic pochodzi po .extra, więc zasady .basic będą miały pierwszeństwo, jeśli to możliwe.

Jeśli chcesz, aby dostarczyć trzeci możliwości (na przykład, że to .basic jednak, że zasady .extra powinna nadal obowiązują), trzeba wymyślić inną klasę, .basic-extra może, który wyraźnie przewiduje, że.

Źródło

2009-08-24 10:59:07 VoteyDisciple

Jak określić kolejność klas CSS?

Odpowiedz

Powiązane problemy