2013-01-01 7 views
5

Używam :before do tagowania linków do profili użytkowników za pomocą symbolu, aby scharakteryzować użytkownika, przykłady obejmują "administrator", "nieaktywny użytkownik", "nowicjusz" i tak dalej.Co się stanie, jeśli wiele klas tego samego elementu zdefiniuje: przed pseudoelementem?

Chodzi o to, że można złożyć więcej niż jeden wniosek.

Co się stanie, jeśli więcej niż jedna klasa na łączu zdefiniuje pseudoelement :before z content? Czy najbardziej szczegółowy selektor zastępuje pierwszy? A może oba pojawiają się w porządku? Cokolwiek się stanie, czy jest to rzetelne zachowanie?

+2

empirycznie, najbardziej swoistych zastępuje i * * mniej specyficzne; ale nie mam specyfikacji, z którą mógłbym to potwierdzić jako * poprawne * zachowanie; ale wydaje mi się, że to chyba wiąże się z ogólną specyfiką CSS. –

+0

Okazuje się, że to pytanie jest duplikatem innego, na które odpowiedziałem kilka miesięcy wcześniej. Moją wymówką, żeby o tym nie pamiętać? [Pierwotnie był to jeden liniowiec (dwaj skazani?).] (Http://stackoverflow.com/revisions/11999197/1) Od tego czasu połączyłem większość informacji w tej odpowiedzi z wcześniejszą. – BoltClock

Odpowiedz

4

Najbardziej specyficzny selektor ma pierwszeństwo. To jest wspomniane w CSS2.1:

Pseudo-elementy zachowują się jak prawdziwe elementów w CSS z wyjątkami opisanymi poniżej i elsewhere.

Pod względem rzeczywistego zachowania przeglądarki, o ile mi wiadomo, to zachowanie jest niezawodny we wszystkich przeglądarkach obsługujących :before i :after na niezastępowanych elementach, takich jak a, dla których CSS2.1 definiuje zachowanie dla tych pseudoelementów, w przeciwieństwie do zastępowanych elementów, takich jak img. Ma to sens, ponieważ jeśli zostanie wygenerowany więcej niż jeden taki pseudoelement, przeglądarka nie będzie wiedziała, w jaki sposób powinna je ułożyć w strukturze formatowania.

W poniższym przykładzie, o swoistości i kaskady, a.inactive:before będą miały pierwszeństwo i pseudo-element ten link :before będzie miał zawartość dobieraniu (ponieważ oba przełączniki są równie specyficzny - uwzględniając selektor typu, selektor klasy i pseudo-element):

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>

Jeśli element można dopasować więcej niż jeden przełącznik z tego samego pseudo-elementu, a chcesz je wszystkie do zastosowania w jakiś sposób trzeba będzie tworzyć dodatkowe reguły CSS z grzebieniem seedors, dzięki czemu możesz dokładnie określić, co powinna zrobić przeglądarka w tych przypadkach. Rozszerzanie powyższym przykładzie:

a.administrator:before { 
 
    content: '[Administrator] '; 
 
} 
 

 
a.inactive:before { 
 
    content: '[Inactive User] '; 
 
} 
 

 
a.administrator.inactive:before { 
 
    content: '[Administrator] [Inactive User] '; 
 
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>

+0

Dziękuję. Rozwiązałem swój problem, tworząc większość kombinacji wzajemnie się wykluczających i tworząc połączone reguły dla pozostałych kombinacji. –

Powiązane problemy