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

Question 1

Я понимаю, что использование 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>

Question 2

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

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

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

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

Question 3

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>

Question 4

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

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

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

p.large {
    color:blue;
}

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

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

Question 5

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

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

.myClass h2

Которая выбирает все дочерние элементы, у myClassкоторых есть тэгh2

Question 6

:first-childСелектор CSS позволяет вам выбрать элемент, который является первым дочерним элементом в своем родительском элементе.

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

Answer 1

Я понимаю, что использование 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>

Answer 2

4

Возможно, стоит обновить заголовок вопроса, чтобы отразить, что вы на самом деле спрашиваете, как работают селекторы element.class, а не почему они не работают так, как вы ожидаете.

Gabriel

Answer 3

105

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

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

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Демо

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

PSL
источник

Для ясности я пытаюсь понять, как работает селектор element.class. Я специально пытаюсь использовать синтаксис element.class, чтобы переопределить цвет элемента (h2, который находится в myClass) на синий, а не на зеленый цвет класса. Я хотел бы знать, как настроить таргетинг на конкретный элемент в классе.

Кэролайн

@Carolyn, если вы этого хотите, вам нужно использовать myClass на h2. Как это jsfiddle.net/wDmwE . Причина в том, что правило css на h2 переопределит класс .myClass в контейнере.

PSL

1

Потрясающе! Да, ваш ответ помог. Думаю, моя проблема была в специфичности (я только узнаю об этом). Еще раз спасибо!. Очень признателен.

Кэролайн

1

В заключение. Долго искал это решение. Я знал об elementWithAClass.Class {}, но не о .Class elementInsideThisClass {}. Спасибо. Я должен тебе пива: D

kv1dr 04

Answer 4

Для ясности я пытаюсь понять, как работает селектор element.class. Я специально пытаюсь использовать синтаксис element.class, чтобы переопределить цвет элемента (h2, который находится в myClass) на синий, а не на зеленый цвет класса. Я хотел бы знать, как настроить таргетинг на конкретный элемент в классе.

Кэролайн

Answer 5

@Carolyn, если вы этого хотите, вам нужно использовать myClass на h2. Как это jsfiddle.net/wDmwE . Причина в том, что правило css на h2 переопределит класс .myClass в контейнере.

PSL

Answer 6

1

Потрясающе! Да, ваш ответ помог. Думаю, моя проблема была в специфичности (я только узнаю об этом). Еще раз спасибо!. Очень признателен.

Кэролайн

Answer 7

1

В заключение. Долго искал это решение. Я знал об elementWithAClass.Class {}, но не о .Class elementInsideThisClass {}. Спасибо. Я должен тебе пива: D

kv1dr 04

Answer 8

58

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>

КМЗ
источник

Спасибо - я действительно пытаюсь понять, как использовать селектор element.class. Я хочу, чтобы все элементы h2 в "myClass"

Кэролайн

@Carolyn, помогает ли мой обновленный ответ? Если нет, то я не понимаю, о чем вы спрашиваете.

КМЗ 05

Да спасибо!! Я все еще пытаюсь понять специфику.

Кэролайн

@Carolyn есть что-то особенное, с чем у вас проблемы?

ASGM 05

ASGM - у меня возникли проблемы с пониманием того, как работает селектор element.class. С тех пор, как я опубликовал, я узнал немного больше (наряду с информацией, представленной на этом сайте), поэтому я использовал их неправильно. Спасибо,

Кэролайн

Answer 9

Спасибо - я действительно пытаюсь понять, как использовать селектор element.class. Я хочу, чтобы все элементы h2 в "myClass"

Кэролайн

Answer 10

@Carolyn, помогает ли мой обновленный ответ? Если нет, то я не понимаю, о чем вы спрашиваете.

КМЗ 05

Answer 11

Да спасибо!! Я все еще пытаюсь понять специфику.

Кэролайн

Answer 12

@Carolyn есть что-то особенное, с чем у вас проблемы?

ASGM 05

Answer 13

ASGM - у меня возникли проблемы с пониманием того, как работает селектор element.class. С тех пор, как я опубликовал, я узнал немного больше (наряду с информацией, представленной на этом сайте), поэтому я использовал их неправильно. Спасибо,

Кэролайн

Answer 14

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

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

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

p.large {
    color:blue;
}

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

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

Answer 15

Спасибо. Очень много. Все мне очень помогли.

Кэролайн

Answer 16

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

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

.myClass h2

Которая выбирает все дочерние элементы, у myClassкоторых есть тэгh2

Answer 17

:first-childСелектор CSS позволяет вам выбрать элемент, который является первым дочерним элементом в своем родительском элементе.

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

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

Ответы:

Демо