Использовать пробел или больше знакa> в селекторе CSS?

У меня есть код CSS:

.welcome div {
   font-size: 20px;
}

который делает то, что я хочу, но также записываю его как

.welcome > div {
   font-size: 20px;
}

сделает то же самое.

Есть ли какая-то причина использовать один над другим или это всего лишь два разных способа сделать одно и то же?

Ответ 1

Нет, они совершенно разные, использование > выбирает дочерний элемент, тогда как использование пробела будет выбирать вложенный элемент на любом уровне.

Например...

Использование ␣/пробела в селекторе...

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

Итак, селектор, имеющий пробел, будет нацелен на div на любом вложенном уровне родительского элемента.

Демо (с помощью ␣/space)

.welcome div {
    font-size: 20px;
    color: #f00;
}

Используя >

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

В то время как селектор будет нацелен на ваш div, который является дочерним элементом элемента, имеющего .welcome, но он не будет выбирать div, который вложен внутри тега section, поскольку он является внуком (но а не дочерним) внешнего div.

Демо 2 (с помощью >)

.welcome > div {
    font-size: 20px;
    color: #f00;
}

Из MDN: (для ␣)

Комбинатор ␣ (предназначенный для представления пробела или более правильно один или несколько пробельных символов) объединяет два селектора так что комбинированный селектор соответствует только тем элементам, которые соответствуют второй селектор, для которого существует соответствие элемента предка первый селектор. Селекторы потомков похожи на дочерние селекторов, но они не требуют, чтобы соотношение между согласованные элементы должны быть строго родительскими.

Из MDN: (для >)

Комбинатор > разделяет два селектора и сопоставляет только те элементы, соответствующие второму селектору, которые являются прямыми детьми элементы, согласованные с первым. В отличие от этого, когда два селектора в сочетании с селектором потомков, комбинированный селектор выражение соответствует тем элементам, которые соответствуют второму селектору для в котором существует элемент предка, соответствующий первому селектору, независимо от количества "перелетов" вверх по DOM.

Ответ 2

Они означают две разные вещи.

.welcome div означает выбор любого div, который является потомком .welcome. Таким образом, он будет выбирать все эти элементы div:

<section class="welcome">
    <div>Me</div>
    <div>And me
        <div>And me
            <div>And me too!</div>
        </div>
    </div>
</section>

.welcome > div выбирает только прямой дочерний элемент div .welcome. Итак:

<section class="welcome">
    <div>It selects me</div>
    <div>And me
        <div>But not me
            <div>And not me either!</div>
        </div>
    </div>
</section>

Прочитайте http://css-tricks.com/child-and-sibling-selectors/ и https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Ответ 3

Взято из ссылка W3C CSS,

E F

Соответствует любому элементу F, являющемуся потомком элемента E.

тогда

E > F

Соответствует любому элементу F, который является дочерним элементом элемента E.

Ребенок - это только следующее поколение. Потомок - это человек в любом последующем поколении.

Ответ 4

.welcome div

Выбирает все элементы внутри элемента с классом приветствия

.welcome>div

выбирает все элементы, где родительский элемент является классом класса ".welcome"

Ответ 5

если вы используете

.welcome div
{
   font-size: 20px;
}

css будет применяться ко всем потомкам div.welcome

если вы используете

.welcome > div
{
  font-size: 20px;
}

css будет применяться только к прямым дочерним divs, а не к их потомкам

найдите ссылку http://jsfiddle.net/65rL6/

Надеюсь, что это поможет!

Ответ 6

.welcome div будет влиять на ВСЕ разделы внутри класса "приветствия"... если вы используете селектор " > ", это повлияет на JUST для детей из "приветствия".

в качестве примера:

<div class="welcome">
    <div class="one">
        <div class="two">
        </div>
    </div>
    <div class="other">
</div>

welcome div будет влиять на "один", "два" и "другой"

welcome > div будет влиять только на "один" и "другой"