Что означает это правило CSS?> *

Question

Я пытаюсь понять следующий CSS (возможно, не чистый CSS):

.A {
    padding: 0
    .B {
        > * {
           boxShadow: '0 1px 1px rgba(0, 0, 0, .1)'
        }
    }
}

Часть, которую я не понимаю: > * {}

Я знаком с> как дочерний комбинатор, помещенный между двумя селекторами, но здесь это не между двумя селекторами - так, что означает это правило?

Я полагаю, * выбирает все внутри того компонента, который выбирает >.

Answer 1

Это будет эффективно компилироваться в:

.A .B > * { ...

Таким образом, любой элемент, который является прямым потомком .A .B

Answer 2

Код, который вы разместили здесь: SCSS (SASS)

Это создаст следующий код CSS:

.A {
    padding: 0;
}
.A .B > * {
    boxShadow: '0 1px 1px rgba(0, 0, 0, .1)';
}

И значение .B > * {} такововыберет любой элемент, который является непосредственным потомком класса .B.

Answer 3

Это значит - каждый прямой ребенок на ".B". В этом примере будут выбраны теги h1 и p, но не диапазон:

<div class="A">
  <div class="B">
    <h1>Title</h1>
    <p>Paragraph</p>
    <p>
      <span>
      </span>
    </p>
  </div>
</div>

Answer 4

Иногда селекторы потомков идут немного за борт, выбирая больше, чем ожидалось. Иногда необходимо выбирать только прямых потомков родительского элемента, а не каждый экземпляр элемента, глубоко вложенный в предка. В этом случае можно использовать прямой дочерний селектор, поместив знак> больше,> между родительским элементом и дочерним элементом в селекторе.

Например, article> p - это прямой дочерний селектор, идентифицирующий только p-элементы, которые попадают непосредственно в элемент article. Любой элемент p, помещенный вне элемента article или вложенный в другой элемент, отличный от элемента article, не будет выбран.

Ниже абзац в строке 3 является единственным прямым потомком родительской статьи, выбранной таким образом.

CSS:

article > p {...}

HTML:

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
</article>