CSS Selector > * 在 Vue.js 组件中做了什么？答案

【问题标题】：What does the CSS Selector > * do from within a Vue.js component?CSS Selector > * 在 Vue.js 组件中做了什么？
【发布时间】：2018-01-12 22:16:05
【问题描述】：

在探索新的 Vuestic 管理仪表板工具时，我发现了一个 UI 错误，即甜甜圈相对于其包含元素而言过大。我试图调试/修复它，以便提交 PR，但在调试 Vue Chart Base class 时遇到了一个奇怪的 CSS 选择器 > *，这对我来说不太有意义。

我如何解释 > * 在 CSS 中的作用：因为> selector in CSS 获取所有子元素，而* selector in CSS 获取页面上的每个元素，我想也许使用此选择器意味着获取每个子元素。

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

【问题讨论】：

它选择所有的直接孩子
@JonUleis：儿童的 XML 定义不是“下一层”吗？我认为不止一层是“孙子”或“后裔”。（同样的区别也适用于父母与祖父母/祖先）。
这条语句“CSS 中的* 选择器获取页面上的每个元素” 对于大多数实际用途可能很有用，但它在技术上是不正确的。 Universal selector 匹配任何类型的元素。这是否意味着页面上的每个元素取决于使用它的上下文。例如，div > * > em 将选择 div 的所有孙子（确切地说是孙子，不是子孙，也不是进一步的后代），而不管中间元素的类型。

标签： css vue.js vue-component

【解决方案1】：

它选择父元素的所有子元素，因此parent > * 等于'父>子元素'（但不是子元素的子元素！）。例如，我添加了 sn-p。在这里，我使用#first > * {background-color: black;} 将<div id="first"></div> 的所有子元素的background-color 更改为黑色：

#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>

【讨论】：

但是如何在组件的样式规则中单独解释一行（意味着它不以 DOM 标签、ID、类为前缀，例如：``` ul > * {...} ``` ``` #myId > * { ...} ``` ``` .myClass > * {...}``` 在我提供给我正在询问的 Vue.js 组件的链接中在这个问题的上下文中，没有定义前缀/目标父元素。所以......这是否意味着没有任何明确定义的父元素，无论包含元素是......被隐式定义为父元素还是贪婪 * 选择器在没有明确定义父级的情况下覆盖它？
@BenjaminDean，这个规则适用吗？

【解决方案2】：

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

但是，这条带有universal selector * 的规则具有较低的specificity，因此其他规则很容易覆盖它，使其可用作备用规则。

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

【讨论】：