Какой элемент я буду выбирать, когда я пишу .panel> * {…} в CSS?

Что значит этот селектор .panel > * { ... } в CSS?

4
задан 30.12.2016, 05:12
0 ответов

Будешь выбирать все прямые дети элементов с классом .panel, будьте этикетки, которой они и у них есть класс / идентификация, который у них есть.

Замечание, которое в зависимости от свойств CSS, которые изменяются, они могут, что Ваши потомки получили в наследство стоимость, что могло бы давать фальшивую печать, которой выбрано все то, что было бы внутри панели, когда они действительно - только прямые потомки, потому что ты используешь селектор с >.

* { color:blue; }
.panel > * { color:red; }
<div>No seleccionado porque no estoy dentro del panel</div>

<div class="panel">
  No seleccionado porque aunque dentro del panel, no estoy dentro de una etiqueta
  <div>Seleccionado por ser un descenciente directo</div>
  <div>Yo también estaré seleccionado <a href="#">pero no este enlace</a></div>
  <p>Este párrafo estará seleccionado <span>pero no el span de dentro</span></p>
</div>
9
ответ дан 03.12.2019, 17:56

Действительно то, что ты должен дифференцировать для стиля .panel > * { ... } дело в том, что он составлен двумя селекторами:

  • >, который ссылается на прямые элементы внутри контейнера, а именно, в элементы дети контейнера.

Пример:

.panel > span{
  background-color: red;
}
<div class="panel">
   <span>Este es un span hijo y por eso aplica</span>
   <label>Este es un hijo directo pero no aplica porque es una label</label>
   <div>
     <span>Este es un span nieto</span>
   </div>
</div>

Поскольку ты можешь наблюдать, стиль применяется в span что является прямым сыном контейнера, но не применяется в span что не является прямым сыном.

  • *, который ссылается на все элементы страницы.

Следовательно, комбинация этих двух селекторов > * ссылаясь на класс .panel значь, что он будет ссылаться на любой элемент, будьте типа, который, который является прямым сыном контейнера .panel.

Однако, ты должен иметь в виду, что есть какие-то свойства как цвет или размер буквы, что, если применяется к контейнеру сын, также ее получают в наследство в свою очередь дети этого контейнера, а именно, внуки главного контейнера (panel в этом случае). Однако, ты одинокий применяешь к нему стили к элементам прямые дети.

2
ответ дан 03.12.2019, 17:56