这个 .container > * {} 在 CSS 中是什么意思？ [复制]答案

【问题标题】：what does this .container > * {} mean in css? [duplicate]这个 .container > * {} 在 CSS 中是什么意思？ [复制]
【发布时间】：2017-11-28 03:36:12
【问题描述】：

任何人都可以为我解释一下，我正在研究 css 布局。但是对于下面的这段代码，我卡住了

.container > * {
  padding: 10px;
  flex: 3 100% ;
}

你能解释一下这种情况下的“大于符号和星号”吗？这是这里的原始代码：

https://codepen.io/cubigamer/pen/OgWqpB?editors=1100

【问题讨论】：

我编辑了你的问题，因为你的问题与 Flexbox 无关，都是关于 CSS 选择器的

标签： css css-selectors

【解决方案1】：

* 表示所有元素，

而> 表示直系子女。

所以.container > * 表示容器类的所有直接子级。

【讨论】：

正确，除了术语 immediate children 是多余的。孩子就是孩子。我猜他们会是直系后代。
@Michael_B 怎么多余？ .container > * 表示容器类的所有直接子级，而.container * 表示容器类的所有子级（在所有级别）。我错过了什么吗？
是的，你错过了一些东西。我不是在谈论选择器，这很好（我赞成）。我指的是这个词本身。所有子代都是父代的直系子代。 直系子女 是多余的。你可以叫他们孩子。
换句话说，如果你有孩子，他们就是你的孩子。如果你有孙子，他们就不是你的孩子。他们是你的后代。所以没有必要称你的孩子为我的直系孩子。
@Michael_B 嗯！有趣的。所以第一层你称他们为children，随后的所有层你都称他们为descendants。好的，这很好，在这种情况下，immediate 这个词就像你所说的那样是多余的。然而，并不是每个人都理解这一点，并且通常两个词 children 和 descendants 可以互换使用，因此为了清楚起见，可能可以省略。但是谢谢你的注意。

【解决方案2】：

这里> 是一个CSS 选择器，它表示子元素，* 表示所有元素。

所以下面的例子意味着这些样式应该应用在所有元素中，这些元素在父元素中有container类

.container > * {
  padding: 10px;
  flex: 3 100% ;
}

【讨论】：

谢谢@Racil Hilan,@Michael_B,@Pawan Kumar。谢谢