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組件中做什麼？

回答

相關問題