Question

我目前正在尝试使用Sequence.js，到目前为止很棒。但是，有一条线，我很难解释。就是这样：

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

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

CSS

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

然后它意味着所有的li都在.seq-canvas -element之下。例如：

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

......对吗？

显然*表示所有元素。但是如果＆gt;和*合并，然后让我感到困惑。所以这是一个例子：

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子项的颜色：

＆＃13;

#sequence .seq-canvas > *  {color: blue;}

* { font-size: 10px; }

＆＃13;

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

＆＃13;

重要说明：示例中<span>的颜色是默认的黑色，而不是蓝色，因为>不会对其应用蓝色。它以蓝色显示的原因是因为它继承了父级的颜色。一些CSS样式是继承的，有些则不是。如果您的CSS应用的是未继承的样式，则<span>看起来与其父级不同。理解这有助于理解> *的含义。在您的示例中，您只应用继承的蓝色，因此仅指定#sequence .seq-canvas而不使用> *将在视觉上具有相同的效果。但是，它只适用于.seq-canvas，孩子们会继承它，但在视觉上它是相同的。但是，如果您使用未继承的样式，则会看到#sequence .seq-canvas与添加> *之间的差异。

一种未继承的样式是border。在下面的示例中，我将颜色和边框应用于#sequence .seq-canvas和#sequence2 .seq-canvas2 > *，因此您可以看到在两种情况下所有子项都是蓝色的（第一个是继承的，第二个是直接应用的），但是当涉及到边境时，第一组儿童没有边界，因为它没有适用于他们并且他们不会继承它，而第二组儿童有边界因为它是直接应用的他们：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS使用＆＃39;＆gt;＆＃39; （大于）和＆＃39; *＆＃39; （星）

1 个答案: