Как выбрать элемент с определенным классом?

Я понимаю, что использование element.class должно позволить определенному элементу, назначенному классу, получать разные "стили", чем остальные классы. Это не вопрос о том, следует ли это использовать или нет, но я пытаюсь понять, как этот селектор должен работать. От взгляда на массу примеров в Интернете, я считаю, что синтаксис верен и не понимает, почему это не работает.

Вот пример:

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>

Ответы

Ответ 1

Это должно быть так:

h2.myClass ищет h2 с классом myClass. Но вы действительно хотите применить стиль для h2 внутри .myClass, чтобы вы могли использовать селектор потомков .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

Этот ref даст вам общее представление о селекторах и взгляните на селектор потомков

Ответ 2

h2.myClass относится ко всем h2 с помощью class="myClass".

.myClass h2 относится ко всем h2, которые являются дочерними элементами (т.е. вложенными) элементами с class="myClass".

Если вы хотите, чтобы h2 в вашем HTML выглядел синим, измените CSS на следующее:

.myClass h2 {
    color: blue;
}

Если вы хотите иметь возможность ссылаться на этот h2 на класс, а не на его тег, вы должны оставить CSS таким, какой он есть, и дать класс h2 a в HTML:

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

Ответ 3

Селектор element.class предназначен для ситуаций стиля, таких как:

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

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

p.large {
    color:blue;
}

И вашему диапазону, и p будет присвоен размер шрифта и размер шрифта от .large, но синий цвет будет назначен только p.

Как указывали другие, вы работаете с селекторами потомков.

Ответ 4

h2.myClass действителен только для h2 элементов, которым присвоен класс myClass.

Вы хотите отметить это следующим образом:

.myClass h2

Что выбирает всех дочерних элементов myClass, которые имеют тэг h2