it-swarm.com.ru

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

Насколько я понимаю, использование 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>
62
Carolyn

Должно быть так:

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

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

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

84
PSL

h2.myClass ссылается на все h2 с class="myClass".

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

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

.myClass h2 {
    color: blue;
}

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

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

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

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

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

p.large {
    color:blue;
}

Ваши span и p будут назначены font-size и font-weight из .large, но синий цвет будет назначен только p.

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

10
Andrew Clody

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

Вы хотите отметить это так:

.myClass h2

Который выбирает всех потомков myClass, которые имеют тэг h2

2
RienNeVaPlu͢s