CSS使用'>'（大於）和'*'（明星）

Question

我目前正在嘗試使用Sequence.js，這是迄今爲止令人敬畏的。儘管如此，我有一條線我很難解釋。它是這樣的：

#sequence .seq-canvas > * {...} 

我發現>意味着所有直接給定類的後代。所以，如果說這個

CSS

#sequence .seq-canvas > li {color: red} 

那麼這將意味着所有李時珍是僅低於.SEQ畫布 - 元素。例如：

HTML

<div id="sequence"> 
<ul class="seq-canvas"> 
    <li>This is red</li> 
    <li>This is also red</li> 
    <li> 
    <ul> 
     <li>This is not red?</li> 
     <li>Neither is this?</li> 
    </ul> 
<li>But this is red</li> 
</ul> 
</div> <!-- sequence --> 

...對不對？

而且顯然*意味着所有元素。但是，如果>和*相結合，那麼會讓我困惑。所以這裏有一個例子：

CSS

#sequence .seq-canvas > * {color: blue;} 

HTML

<div id="sequence"> 
<ul class="seq-canvas"> 
    <li>This must be blue</li> 
    <li>So is this</li> 
    <li> 
    <ul> 
     <li>But is this blue?</li> 
    </ul> 
<li>This must also be blue...</li> 
<li>How about <span>SPANS</span> - will they be blue as well?</li> 
<div>Or let's say that I put a div in here (even 
    though I know it's not right), does this then 
    mean that this is blue? 
</div> 
</ul> 
</div> <!-- sequence --> 

？

Answer 1

你的理解對他們是正確的。組合時，它表示指定元素下的所有元素（在您的示例中爲.seq-canvas）。

這是一個測試。請注意，*就將改變字體大小的一切，而> *只會改變.seq-canvas孩子的色彩：

#sequence .seq-canvas > * {color: blue;} 
 

 
* { font-size: 10px; }

<p>I'm outside</p> 
 
<div id="sequence"> 
 
<ul class="seq-canvas"> 
 
    <li>This must be blue</li> 
 
    <li>So is this</li> 
 
    <li> 
 
    <ul> 
 
     <li>But is this blue?</li> 
 
    </ul> 
 
<li>This must also be blue...</li> 
 
<li>How about <span>SPANS</span> - will they be blue as well?</li> 
 
<div>Or let's say that I put a div in here (even 
 
    though I know it's not right), does this then 
 
    mean that this is blue? 
 
</div> 
 
</ul> 
 
</div> 
 
<p>I'm also outside</p>

重要提示：<span>在您的示例中的顏色是默認的黑色，而不是藍色，因爲>不會將藍色應用於它。它以藍色顯示的原因是因爲它繼承了父級的顏色。一些CSS樣式是繼承的，有些則不是。如果您的CSS應用的是未繼承的樣式，那麼<span>將看起來不同於其父項。瞭解這有助於理解> *的含義。在你的例子中，你只應用了繼承的藍色，所以只需指定#sequence .seq-canvas而沒有> *就會在視覺上產生相同的效果。然而，它只適用於.seq-canvas，孩子們會繼承它，但在視覺上它是相同的。但是，如果您使用的是未繼承的樣式，則會看到#sequence .seq-canvas與添加> *之間的區別。

一種不被繼承的風格是border。在下面的例子中，我將顏色和邊框應用於#sequence .seq-canvas和#sequence2 .seq-canvas2 > *，所以你可以看到所有的孩子在兩種情況下都是藍色的（第一個是繼承的，第二個是直接應用的），但是當涉及到邊框時，的第一批兒童沒有邊界，因爲它並不適用於他們，他們不繼承它，而第二組有邊框，因爲它是直接適用於他們：

#sequence .seq-canvas {color: blue; border: 1px solid green;} 
 
#sequence2 .seq-canvas2 > * {color: blue; border: 1px solid green;} 
 

 
* { font-size: 10px; }

<p>I'm outside</p> 
 
<div id="sequence"> 
 
<ul class="seq-canvas"> 
 
    <li>This must be blue</li> 
 
    <li>So is this</li> 
 
    <li> 
 
    <ul> 
 
     <li>But is this blue?</li> 
 
    </ul> 
 
<li>This must also be blue...</li> 
 
<li>How about <span>SPANS</span> - will they be blue as well?</li> 
 
<div>Or let's say that I put a div in here (even 
 
    though I know it's not right), does this then 
 
    mean that this is blue? 
 
</div> 
 
</ul> 
 
</div> 
 
<div id="sequence2"> 
 
<ul class="seq-canvas2"> 
 
    <li>This must be blue</li> 
 
    <li>So is this</li> 
 
    <li> 
 
    <ul> 
 
     <li>But is this blue?</li> 
 
    </ul> 
 
<li>This must also be blue...</li> 
 
<li>How about <span>SPANS</span> - will they be blue as well?</li> 
 
<div>Or let's say that I put a div in here (even 
 
    though I know it's not right), does this then 
 
    mean that this is blue? 
 
</div> 
 
</ul> 
 
</div> 
 
<p>I'm also outside</p>