'>'(大于号)和 '*'(星号)的CSS使用

Question

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

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

我发现 > 表示给定类的所有直接后代。所以如果它说了这个

CSS

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

那么它就意味着所有 li 都在 .seq-canvas 元素的下方。示例:

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 的 child 的颜色:

#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>将看起来与其 parent 不同。理解有助于理解> *的含义.在您的示例中，您仅应用继承的蓝色，因此只需指定 #sequence .seq-canvas没有 > *在视觉上会有同样的效果。但是，它仅适用于 .seq-canvas children 会继承它，但在视觉上是一样的。但是，如果您使用未继承的样式，那么您将看到 #sequence .seq-canvas 之间的区别。并添加 > * .

一种不被继承的样式是 border .在下面的示例中，我对 #sequence .seq-canvas 应用了颜色和边框。和 #sequence2 .seq-canvas2 > * ，所以你可以看到两种情况下所有的 child 都是蓝色的(第一个是继承的，第二个是直接应用的)，但是当涉及到边框时，第一组 child 没有边框，因为它没有应用到他们身上他们不继承它，而第二组有边框，因为它直接应用于他们:

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