HTML

Question

我对haml和scss有一个非常奇怪的问题...我想循环遍历div.star并应用随机宽度，高度和位置。我能够做到这一点，我可以在编译的代码中看到一切都按预期工作，但由于某种原因，.star没有得到合适的风格。我确定这是一个非常愚蠢的错误，但我无法理解它！

Answer 1

问题在于你使用.star：nth-of-type。它不会起作用，因为伪类nth-of-type只有在使用类型时才能工作。

与p：nth-of-type（6）{}或div：nth-of-type（2）类似。

 @for $j from 1 through 20 {
    .star:nth-of-type(#{$j}) {
        $x: random(4px) + 1px;
        width: $x;
        height: $x;
        top: random(40) * 1%;
        left: random(100) * 1%;
    }

}

我做的是让它发挥作用....

HTML

在所有星星周围添加一个包装类.star-wrapper

.background
.stripe
.stripe
-(1..42).each do |i|
.hex
.corner.corner-1
.corner.corner-2
.corner.corner-3
.star-wrapper
-(1..20).each do |j|
.star

CSS

所以现在你说，通过包装内的所有div并给它们一个随机位置

.star-wrapper {
 @for $j from 1 through 20 {
    div:nth-of-type(#{$j}) {
        $x: random(4px) + 1px;
        width: $x;
        height: $x;
        top: random(40) * 1%;
        left: random(100) * 1%;
      }
   }
}

.star-wrapper .star {
    position: absolute;
    @include border-radius(50%);
    background: rgba(255,255,255,0.5);
    z-index: 100;
}

我希望它可以帮助你...... 另请阅读这个问题[CSS3选择器：带类名的第一个类型？

第二个问题

将此添加到codepen示例中的html

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

我在班级.star

中添加了四个跨度

.star:nth-of-type(10) {
 width: 10px;
 height: 10px;
 background: red;
 }

母猪，你会期望10项是红色的，但事实并非如此。 .star：nth-of-type呈现为div：nth-of-type，它不会查看span标记。

结果

元素15呈红色。

问题：haml和scss中的nth-of-type

1 个答案:

HTML

CSS

第二个问题

结果