这个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

这意味着-每个直接子代都为“ .B”。在此示例中，它将选择h1和p标签，但不会选择跨度：

strfind

Answer 3

您在此处放置的代码为SCSS(SASS)

这将生成以下CSS：

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

.B > * {}的含义是，它将选择任何属于.B类直接子元素的元素。

Answer 4

有时候，后代选择器有些过分，选择了超出预期的选择。有时只需要选择父元素的直接子元素，而不是元素的每个实例都嵌套在祖先内部。在这种情况下，可以通过在选择器内的父元素和子元素之间放置一个大于号>来使用直接子选择器。

例如，article> p是直接子选择器，仅标识直接位于article元素内的p个元素。将不会选择放置在article元素外部或嵌套在article元素以外的其他元素内部的任何p元素。

下面，第3行的段落是其父项的唯一直接子项，因此被选中。

CSS：

article > p {...}

HTML：

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