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

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

445 голосов
/ 12 июля 2010

Например: 

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

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

Ответы [ 7 ]

636 голосов
/ 12 июля 2010

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

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

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

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

31 голосов
/ 13 февраля 2017

> (знак больше чем) - это 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

11 голосов
/ 12 июля 2010

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

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

7 голосов
/ 12 июля 2010

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

2 голосов
/ 12 июля 2010

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

1 голос
/ 19 декабря 2013
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, получат к ним стиль.

0 голосов
/ 14 января 2017

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...