Что означает CSS-селектор «>» (больше знака)?


Ответы:


673

>является детским комбинатором , иногда ошибочно называемым прямым потомком комбинатора. 1

Это означает, что селектор div > p.some_classвыбирает только те абзацы .some_class, которые вложены непосредственно в a div, а не любые абзацы, которые вложены дальше внутри.

Иллюстрация:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

Что выбрано, а что нет:

  1. Выбранный
    Это p.some_classнаходится непосредственно внутри div, следовательно, между обоими элементами установлены родительско-дочерние отношения.

  2. Не выбрано
    Это p.some_classбудет , удерживаемое blockquoteвнутри div, а не divсам по себе. Хотя это p.some_classпотомок div, это не ребенок; это внук

    Следовательно, while div > p.some_classне будет соответствовать этому элементу, div p.some_classбудет использовать вместо этого комбинатор-потомок .


1 Многие люди идут дальше, называя это «прямым ребенком» или «непосредственным ребенком», но это совершенно не нужно (и невероятно раздражает меня), потому что дочерний элемент в любом случае является непосредственным по определению , поэтому они имеют в виду одно и то же. Нет такой вещи как «косвенный ребенок».


2
+1 Это действительно называется детским селектором ? Если так, то это довольно обманчиво. Я бы подумал, #something aбыл бы детским селектором.
Алекс

2
@alex: да :) #something aможет означать, aчто это внук или великий внук #something(без учета глубины вложения).
BoltClock

12
@alex это называется дочерним комбинатором , пространство называется потомственным комбинатором
robertc

33
Когда кто-то является ребенком их дедушки и бабушки, мы имеем дело с действительно неприятным случаем инцеста. К счастью, это невозможно в HTML.
Квентин

8
Я не слышу, чтобы миряне называли своих детей своими прямыми детьми для ясности.
BoltClock

41

> (знак «больше чем») - это CSS Combinator.

Комбинатор - это то, что объясняет отношения между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

В CSS3 есть четыре различных комбинатора:

  1. селектор потомков (пробел)
  2. дочерний селектор (>)
  3. соседний селектор (+)
  4. общий выбор братьев и сестер (~)

Примечание: < недопустимо в селекторах CSS.

введите описание изображения здесь

Например:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Вывод:

введите описание изображения здесь

Больше информации о CSS Combinators



@premraj Спасибо за отличное объяснение селекторов css родитель-ребенок!
YCode

Что это значит тогда, когда вы получаете что-то вроде .entry-content > * {"code" }чего следует .entry-content {"other code" }? Не .entry-content > *распространяется на всех детей entry-content?
YCode

14

Как уже упоминали другие, это селектор детей. Вот соответствующая ссылка.

http://www.w3.org/TR/CSS2/selector.html#child-selectors


Большое спасибо за ссылку! Я обнаружил также «Соседние селекторы».
Миша Морошко

Вы найдете поддержку браузера на Sitepoint. Не работает в IE6, если это имеет значение для ваших проектов, хорошо везде. Этот ресурс ESP. полезно для братьев и сестер: nth-child () и т. д., где поддержка еще не завершена
FelipeAls

10

Он сопоставляет pэлементы с классом, some_classкоторые находятся непосредственно под div.


5

Все pтеги с классом, some_classкоторые являются прямыми потомками divтега.


4
HTML
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
CSS
div > p.some_class{
    color:red;
}

Все прямые дети, которые будут <p>с ними .some_class, получат к ним стиль.


3

(дочерний селектор) был введен в css2. div p {} выбирает все элементы p, потомки элементов div, тогда как div> p выбирает только дочерние элементы p, но не grand child, потом grand grand child и так далее.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Для получения дополнительной информации о CSS Ce [лекторах и их использовании, проверьте мой блог, css селекторы и css3 селекторы


0

Селектор с большим знаком (>) в CSS означает, что селектор справа является прямым потомком / потомком того, что находится слева.

Пример:

article > p { }

Означает только стиль абзаца, который идет после статьи.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.