class ma pierwszeństwo, gdy dwie klasy są przypisane do jednego div

Tworzyłem <div>tag, w którym chciałem zastosować dwie klasy do <div>tagu, który byłby galerią miniatur. Jedna klasa za swoją pozycję, a druga za styl. W ten sposób mogłem zastosować styl, miałem dziwne rezultaty, które doprowadziły mnie do pytania.

Czy do <div>tagu można przypisać dwie klasy ? Jeśli tak, który z nich ma pierwszeństwo przed drugim lub który ma pierwszeństwo?

Do elementu DIV można przypisać wiele klas. Po prostu oddziel je w nazwie klasy spacjami w ten sposób:

<div class="rule1 rule2 rule3">Content</div>

Ten div wtedy dało żadnych reguł stylów dla trzech różnych selektorów klas: .rule1, .rule2i .rule3.

Reguły CSS są stosowane do obiektów na stronie, które pasują do swoich selektorów w kolejności, w jakiej występują w arkuszu stylów, a jeśli występuje konflikt między dwiema regułami (więcej niż jedna reguła próbuje ustawić ten sam atrybut), to specyficzność CSS określa, która zasada ma pierwszeństwo.

Jeśli specyficzność CSS jest taka sama dla sprzecznych reguł, to późniejsza (zdefiniowana później w arkuszu stylów lub w późniejszym arkuszu stylów) ma pierwszeństwo. Kolejność nazw klas w samym obiekcie nie ma znaczenia. Kolejność reguł stylów w arkuszu stylów ma znaczenie, jeśli specyfika CSS jest taka sama.

Tak więc, gdybyś miał takie style:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Następnie, ponieważ obie reguły pasują do elementu div i mają dokładnie taką samą specyfikę CSS, druga reguła pojawia się później, więc będzie miała pierwszeństwo, a tło będzie czerwone.

Jeśli jedna reguła miała wyższą specyficzność CSS ( div.rule1wyniki wyższe niż .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Wtedy miałoby to pierwszeństwo, a kolor tła byłby zielony.

Jeśli te dwie reguły nie są ze sobą sprzeczne:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Następnie zastosowane zostaną obie reguły.

W rzeczywistości klasa, która została zdefiniowana jako ostatnia w css - jest stosowana w Twoim div.

Sprawdź to:

czerwony ostatni w css

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

vs

niebieski ostatni w css

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Jeśli pytasz, czy mają tę samą właściwość, to zgodnie z regułą CSS weź ostatnią instrukcję.

<div class="red green"></div>

CSS

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

Zgodnie z powyższym przykładem przyjmuje ostatnią instrukcję zgodnie z drzewem css, którym jest .green .

Klasa zdefiniowana jako ostatnia w CSS ma priorytet, jeśli nic innego nie ma zastosowania.

Przeczytaj o priorytecie CSS, aby zobaczyć, jak to działa.

Do elementu można przypisać wiele klas, wystarczy je oddzielić spacją

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Ze względu na kaskadę w CSS, reguły nadpisywania są najbliżej dołu do elementu zostaną zastosowane dokumentu.

Więc jeśli masz

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

Zostanie użyty kolor czerwony, ale nie kolor tła, ponieważ nie został on nadpisany.

Musisz również wziąć pod uwagę specyfikę CSS, jeśli masz bardziej szczegółowy selektor, ten zostanie użyty:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

Zostanie tutaj użyty drugi selektor, ponieważ jest bardziej szczegółowy.

Tutaj możesz zobaczyć to wszystko .