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

например:

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

что именно > знак?

417
css css-selectors

7 ответов

> это ребенок комбинатора, иногда ошибочно называют комбинатором прямого потомка.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, а не . Хотя это p.some_class является потомком элемента div, это не ребенок, это внук.

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

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

597

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

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

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

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

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

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

enter image description here

например: 

<!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>

выход:

enter image description here

дополнительная информация о CSS Combinators

23

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

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

9

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

6

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

2

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

1

( дочерний селектор) был введен в CSS2. div p{ } выберите все элементы P, которые являются элементами div, тогда как div > p выбирает только дочерние элементы p, а не grand child, great 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