Выбор класса под классом с помощью CSS

Question

Я пытаюсь выбрать класс под классом, скажем, у меня есть класс с именем "A" в элементе, а под ним у меня есть другой элемент с именем класса "B".

В DOM есть и другие случаи "B", но ни один из них, кроме одного, не находится под "A".

Чтобы выбрать ТОЛЬКО "B" под "A", я бы использовал:

.A B {

CSS HERE

}

Или я не так делаю?

Вот структура:

<h2 class="A">
<span>TITLECONTENT</span>
</h2>
<p>CONTENT</p>
<div class="B" addthis:title="TITLECONTENT " addthis:url="URL">

Answer 1

нет, ты забыл точку,

.A .B {

}

(при условии, что вы имеете в виду, что ваш HTML похож на это:)

<div class="A">
   <div class="B"></div>
</div>

Всякий раз, когда вы ссылаетесь на класс, вы используете . Всякий раз, когда вы ссылаетесь на идентификатор, вы используете # Всякий раз, когда вы ссылаетесь на имя тега, вы не используете префикс, например, div {}

Используйте наименьшую специфичность , необходимую для нацеливания на различные элементы

Ориентируясь на элемент с несколькими классами, вы добавляете второй класс без пробелов: .one.two

Ориентируясь на элемент-потомок, вы включаете пробел: .one .descendant

Answer 2

Самая общая форма

.A .B { ... }

Это предназначается для любого элемента с классом B, у которого есть родительский класс с классом A, является ли это прямым родителем или нет:

<span class="B">
    <span class="A" >
    </span>
</span>

а также

<span class="B">
    <div>
        <span class="A" >
        </span>
    <div>
</span>

---

Если .B является прямым потомком .A, вы можете указать его следующим образом:

.A > .B { ... }

CSS дочерний селектор

Answer 3

Вы забыли точку, но если вы хотите, чтобы все элементы класса B находились непосредственно под элементами класса A, используйте знак больше, чем. Таким образом, A должен быть прямым родителем B.

.A > .B {
    /* CSS here. */
}

Answer 4

почти правильно. Вы должны сделать

.A .B <- пожалуйста, отметьте точку перед B. </p>

Кроме того, если в будущем вам нужно будет выбрать элемент, который имеет ОБА `и B одновременно, вы сделаете это так:

.A.B

, которая будет нацелена на что-то вроде div class = "A B", но НЕ будет нацелена на div class = "A" или div class = "B"