component >*在Vue.js组件中做什么？

Question

在探索新的Vuestic管理仪表板工具时，我发现了一个UI bug，其中的甜甜圈相对于其包含的元素来说过大。我试图调试/修复它，以便提交一个PR，但是在调试Vue图基类时遇到了一个奇怪的CSS选择器Vue图基类，这对我来说不太合理。

如何解释CSS > * 在CSS中的作用:由于CSS中的选择器获取所有子元素，而CSS中的选择器获取页面上的每个元素，我想使用这个选择器可能意味着获取每个子元素。

当在Vue组件的上下文中使用时，我相信CSS的作用域是该组件，所以我的解释是正确的，还是我弄错了？

Answer 1

> *将选择作为某物的子元素的每个元素，这实质上是除了DOM的根节点之外的所有内容。

但是，与通用选择器 *一起使用的规则具有较低的特异性，因此其他规则将很容易地重写它，从而使其作为备用规则非常有用。

该规则适用的位置取决于定义它的上下文。如果您的Vue组件在阴影DOM中创建节点，并且在那里定义了CSS，那么规则应该只适用于该范围内。

Answer 2

它选择父元素的所有子元素，因此parent > *等于“父元素>childElements”(，而不是子元素的子元素！)。例如，我添加了片段。这里，我使用background-color将<div id="first"></div>的所有子元素的#first > * {background-color: black;}更改为黑色

​

#first {
  padding: 16px;
  background-color: violet
}

#second {
  padding: 16px;
  background-color: lime;
}

.item {
  width: 30px;
  height: 30px;
  background-color: white;
  margin: 6px;
}

#first > * {
  background-color: black;
}

<div id="first">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="second">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

​