Jak wybrać element, który ma określoną klasę?

Rozumiem, że używanie element.classpowinno pozwolić, aby określony element przypisany do klasy otrzymał inny „styl” niż reszta klasy. Nie chodzi o to, czy należy tego używać, czy nie, ale raczej próbuję zrozumieć, jak ten selektor ma działać. Patrząc na mnóstwo przykładów w Internecie, uważam, że składnia jest poprawna i nie rozumiem, dlaczego to nie działa.

Oto przykład:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Tak powinno być:

h2.myClassszuka h2 z klasą myClass. Ale tak naprawdę chcesz zastosować styl dla h2 wewnątrz, .myClasswięc możesz użyć selektora potomków .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Próbny

Ten odnośnik da Ci podstawowe pojęcie o selektorach i przyjrzy się selektorom potomnym

h2.myClassodnosi się do wszystkich h2zclass="myClass" .

.myClass h2odnosi się do wszystkich elementów h2potomnych (tj. zagnieżdżonych) elementów zclass="myClass" .

Jeśli chcesz, aby h2w kodzie HTML był niebieski, zmień CSS na następujący:

.myClass h2 {
    color: blue;
}

Jeśli chcesz mieć możliwość odniesienia się do tego h2przez klasę, a nie jej znacznik, powinieneś pozostawić CSS bez zmian i podać h2klasę a w HTML:

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

Selektor element.class służy do stylizacji w takich sytuacjach:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Zarówno twoja rozpiętość, jak i p będą miały przypisany rozmiar i grubość czcionki od .large, ale kolor niebieski zostanie przypisany tylko do p.

Jak zauważyli inni, to, z czym pracujesz, to selektory potomków.

h2.myClassobowiązuje tylko dla h2elementów, do których myClassbezpośrednio przypisano klasę .

Chcesz to zanotować w ten sposób:

.myClass h2

Która wybiera wszystkie elementy podrzędne, myClassktóre mają zmiennąh2

:first-childSelektor CSS pozwala wskazać element, który jest pierwszym elementem podrzędnym w swoim rodzicu.

element:first-child { style_properties }
table:first-child { style_properties }