CSS使用'>'（大于）和'*'（星号）

Question

我目前正在尝试使用Sequence.js，到目前为止，它确实很棒。不过，有一条线我很难解释。是这样的：

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

我发现这>意味着给定类的所有直接后代。所以如果它说了

的CSS

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

那么这意味着所有位于.seq-canvas -element下方的li都是。例：

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