我目前正在尝试使用Sequence.js,到目前为止很棒.但是,有一条线,我很难解释.就是这样： #sequence .seq-canvas > * {...} 我发现了>表示给定类的所
... . . 我目前正在尝试使用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 -->
… 对？
显然*意味着所有元素.但是如果>和*合并,然后让我感到困惑.所以这是一个例子：
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 -->
？
.解决方法
. 您的理解对他们来说是正确的.组合时,它表示指定元素下的所有元素(示例中为.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与添加>之间的区别. *.
一种未继承的风格是边框.在下面的示例中,我将颜色和边框应用于#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>. . .. ...
