Kolejność priorytetów podczas korzystania z wielu sprzecznych plików css

Question

Podczas korzystania z wielu plików CSS na tej samej stronie i powodują kolizję, skąd mam wiedzieć, który z nich będzie używany? Na przykład, jeśli ktoś mówi niebieskie tło ciała, a drugi mówi czerwony.

Answer 1

Szybka Odpowiedź:

Jeśli oba kawałki CSS mają taką samą specificity (na przykład oboje body{), a następnie w zależności pobiera nazywane LAST zastąpi poprzednie.

ALE, jeśli coś ma wyższą specyfikę (bardziej szczegółowy selektor), będzie używane bez względu na kolejność.

---

Przykład 1:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    .name { color: blue; } 
    .name { color: red; } 
</style> 

Powyższy przykład spowoduje, że kolor czerwony. Oba selektory są takie same i dlatego też mają tę samą specyfikę. A ponieważ CSS czyta od góry do dołu, najpierw mówimy, że jest niebieski, ale potem nadpisujemy to, mówiąc "nie martw się, niech czerwony".

---

Przykład 2:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    #container .name { background-color: blue; } 
    .name { background-color: red; } 
</style> 

Powyższy przykład spowoduje, że kolor niebiesko, chociaż błękit pierwsze dlatego, że selektor jest more "specific".

---

Exception (wykorzystanie !important):

Włączenie !important zastąpi zarówno specyfikę i porządku, ale moim zdaniem, powinny być stosowane tylko wtedy, gdy starasz się bałagan z kod strony trzeciej, w którym nie masz dostępu, aby zmienić go w dowolny inny sposób.

---

CSS zewnętrzna:

Zastąp reguły działają tak samo na zewnętrznych plikach CSS. Wyobraźcie sobie, że umieszczacie je od początku do końca, od góry do dołu. Selektory wywoływane w pierwszym pliku (plikach) zostaną nadpisane przez selektory o tej samej specyficzności w kolejnych plikach. Ale specyfikacja nadal będzie działała na podstawie tego samego pliku lub wielu plików.

---

Jak Test:

W Chrome, Firefox i nowoczesne wersje IE (prawdopodobnie zbyt Safari), można kliknąć prawym przyciskiem myszy na coś i kliknij "Zbadaj element". Spowoduje to wyświetlenie kodu HTML, a także dowolnego zastosowanego CSS. Podczas przewijania w dół CSS (zwykle po prawej) zobaczysz przekreślone elementy - oznacza to, że są one nieprawidłowe lub zostały nadpisane. Aby przetestować, możesz zmodyfikować selektory CSS (w swoim własnym kodzie lub bezpośrednio w polu narzędzi programistycznych), aby były bardziej szczegółowe i zobaczyć, czy to sprawia, że ​​nie są przekreślone ... itd. Odtwarzaj w tym narzędziu - jest BARDZO pomocny.