这个 CSS 规则是什么意思？ > *答案

【问题标题】：What does this CSS rule mean? > *这个 CSS 规则是什么意思？ > *
【发布时间】：2019-09-27 09:24:28
【问题描述】：

我正在尝试理解以下 CSS（可能不是纯 CSS）：

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

我不明白的部分是： > * {}

我熟悉 > 作为放置在两个选择器之间的子组合器，但这里它不在两个选择器之间 - 那么这条规则意味着什么？

我相信* 会选择> 正在选择的任何组件内的所有内容。

【问题讨论】：

【解决方案1】：

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

例如，article > p 是一个直接子选择器，仅标识直接落在文章元素中的 p 个元素。任何放置在 article 元素之外的 p 元素，或嵌套在 article 元素之外的其他元素内的任何 p 元素都不会被选中。

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

CSS：

article > p {...}

HTML：

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

【讨论】：

【解决方案2】：

你放在这里的代码是SCSS(SASS)

这将生成以下 CSS：

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

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

【讨论】：

【解决方案3】：

这意味着 - 每个直接孩子都指向“.B”。在本例中它将选择 h1 和 p 标签，但不选择 span：

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

【讨论】：

【解决方案4】：

这将有效地编译为：

.A .B > * { ...

所以基本上，任何是.A .B 的直接子元素的元素

【讨论】：