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

在探索新的Vuestic管理仪表板工具时，我发现了一个UI错误，其中的甜甜圈与其包含的元素相比过大。我试图调试/修复它，所以我可以提交PR，但是在调试Vue Chart Base class期间遇到了一个奇怪的CSS选择器> *，这对我来说并不合适。CSS Selector> *在Vue.js组件中做什么？

我如何解释什么> *会做在CSS：因为> selector in CSS得到所有的孩子，和* selector in CSS得到每个元素在页面上，我想，或许，使用这种选择意味着让每一个子元素。

当在Vue组件的上下文中使用时，我相信CSS是作用于该组件的，因此我的解释是正确的，还是我误会了？

来源

2017-08-04 Benjamin Dean

它选择所有直接的孩子 – Gerard

@JonUleis：是不是儿童的“下一个级别”的XML定义？我认为，不止一个级别是“孙子”或“后代”。（同样的区别适用于父母对祖父母/祖先）。 – halfer

此语句_“CSS中的'*'选择器获取页面上的每个元素”_对于大多数实际用途可能有用，但它在技术上不正确。 _ [通用选择器]（https://developer.mozilla.org/docs/Web/CSS/Universal_selectors）_匹配任何类型的元素。这是否意味着页面上的_every_元素取决于其使用的上下文。例如'div> *> em'会选择一个div的所有孙子（完全是大孩子，而不是子女，而不是更进一步的后代），无论介入元素的类型如何。 –

它选择父项的所有子元素，因此parent > *等于'parent> childElements'（但不是子项的子项！）。例如，我添加了片段。这里我使用#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>

来源

2017-08-04 21:53:38

但是，如何在组件的样式规则中自行解释它（这意味着它没有以DOM标签，ID，Class为前缀），例如： '''''''''''''''''''''''''''' ' '#myId> * {...}''' '''.myClass> * {...}'' 在我提供给Vue.js组件的链接中，这个问题的上下文中，没有定义前缀/目标父元素，所以......这是否意味着没有任何显式定义的父元素，无论包含元素是...都被隐式定义为父元素或将**贪婪* *'*'选择器覆盖没有明确定义的父代？ –

@BenjaminDean，这个规则是否适用？ –

> *将选择每一个元素是东西，它本质上是一个子元素除了DOM的根节点之外的所有内容。

但是，此规则与universal selector*的值很低specificity因此其他规则很容易覆盖它，因此可用作后备规则。

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

来源

2017-08-05 00:27:45

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

回答

相关问题