1

Если я правильно понял метод работы дочерних селекторов, то то, что написано по нижеприведенной ссылке, не работает.

Стиль распространяется на всех потомков, хотя, судя по описанию, он должен распространяться только на детей, а не на внуков или правнуков.

Источник

Вот пример:

table.special td>h1 {
  color: red; 
}
<table  class="special">
  <tr>
    <td><h1>Test Selector 1</h1>
      <table>
        <tr>
          <td>
            <h1>Test Selector 2</h1>
          </td>
        </tr>
      </table>
    </td> 
  </tr>
</table>

3

3 ответа 3

5

Нет, вы поняли неправильно.
Рассмотрим такой пример:

<section class="container">
  <div class="child level-1">
    Потомок 1-го уровня
    <div class="child level-2">Потомок 2-го уровня</div>
  </div>
</section>

/* Случай А */
.container > .child {
  color: red;
}

/* Случай Б */
.container .child {
  color: red;
}

В случае А правило назначается на потомка первого уровня и наследуется потомком 2-го.
В случае Б правило назначается на потомков всех уровней.

Более точные пояснения:

В первом случае, чтобы изменить стили потомка второго уровня, достаточно просто к нему обратится по уникальному селектору, чтобы перезаписать стили, поскольку он не попадает в целевую выборку, а его собственный селектор по умолчанию имеет вес равный 0.

.container > .child {
  color: red;
}
.level-2 {
  color: blue;
}
<section class="container">
  <div class="child level-1">
    Потомок 1-го уровня
    <div class="child level-2">Потомок 2-го уровня</div>
  </div>
</section>

Во втором случае, чтобы изменить стили потомка второго уровня придется назначить селектор, вес которого не меньше, чем у предыдущего правила, поскольку элемент попадает в целевую выборку.

.container .child {
  color: red;
  text-decoration: underline;
}
/* Так не сработает */
.level-2 {
  color: blue;
}
<section class="container">
  <div class="child level-1">
    Потомок 1-го уровня
    <div class="child level-2">Потомок 2-го уровня</div>
  </div>
</section>

Чтобы заработал второй случай, увеличим вес селектора

.container .child {
  color: red;
}
/* Вес селектора не меньше, чем в предыдущем правиле */
.container .level-2 {
  color: blue;
}
<section class="container">
  <div class="child level-1">
    Потомок 1-го уровня
    <div class="child level-2">Потомок 2-го уровня</div>
  </div>
</section>

5

Всё работает в соответствии с документацией. В вашем правиле выбираются все потомки td (включая "внуков" и "правнуков") таблицы с классом special, а уже у них - только прямые.

Можете проверить на правиле table.special>tr>td>h1 {...}

9
  • Судя из описания, должны выбираться только дети, а не их внуки и правнуки, вот смотрите - В ряде случаев нас интересуют не все "потомки" некоего структурного элемента, но лишь непосредственные - не "внуки" или "правнуки", а только "дети" (child). Для указания того, что правило стиля относится только к непосредственному потомку, в селекторе используется символ ">". 22 янв 2016 в 10:03
  • 1
    Читайте документацию и написанное правило внимательнее: вы выбираете таблицу special, далее выбираете всех потомков td, в том числе тех, которые находятся в дочерней для special таблице. И только теперь у всех выбранных td ищутся прямые потомки h1.
    – alenkins
    22 янв 2016 в 10:07
  • Я понял Вас, спасибо. Но обратите внимание что написано из вышеприведённой ссылки. Цитата: В ряде случаев нас интересуют не все "потомки" некоего структурного элемента, но лишь непосредственные - не "внуки" или "правнуки", а только "дети" (child). Для указания того, что правило стиля относится только к непосредственному потомку, в селекторе используется символ ">". А на самом деле в моём правиле как Вы и написали, выбираются все потомки td (включая "внуков" и "правнуков") . То есть, то что там написано, в вышеприведенной ссылки не верно? 22 янв 2016 в 11:19
  • 1
    Если бы у вас было table.special>tr>td>h1 {...}, то выбирались бы только td из таблицы special, а у вас между table.special и td стоит пробел, вы же понимаете, что он означает?
    – alenkins
    22 янв 2016 в 11:26
  • 1
    да, в абзаце про дочерние селекторы там бредовый пример
    – alenkins
    22 янв 2016 в 11:37
3

В вашем примере, обе надписи покрасились в красный, т.к. обе подпадают под понятие "дочерние" т.е. h1 является дочкой td. У вас или всё работает, или ничего не работает если старый браузер (ie8 например)

1
  • 1
    Судя из описания, должны выбираться только дети, а не их внуки и правнуки, вот смотрите - В ряде случаев нас интересуют не все "потомки" некоего структурного элемента, но лишь непосредственные - не "внуки" или "правнуки", а только "дети" (child). Для указания того, что правило стиля относится только к непосредственному потомку, в селекторе используется символ ">". 22 янв 2016 в 10:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.