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

Например:

div > p.some_class {
  /* Some declarations */
}

Что означает знак >?

Ответ 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>

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

> (знак больше, чем знак) - это комбинатор CSS.

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

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

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

селектор потомков (пробел)
дочерний селектор ( > )
соседний селектор (+)
общий селектор (~)

Примечание. < недействительно в селекторах 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>

Выход:

Предоставлено

Ответ 5

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

Ответ 6

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, получат стиль, применяемый к ним.

Ответ 7

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

<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 [lectors и их использовании, проверьте мой блог, селектора css и селектора css3