使用" nth-of-type"在css中作为变量的信息类型

时间:2018-04-02 21:27:50

标签: html css sass

我正在学习CSS,并发现自己处于找到所有这些可爱的" CSS形状" (https://css-tricks.com/examples/ShapesOfCSS/)我只需要摆弄它们。尤其是" Pointer"一个(在底部)。

问题是,我想在彼此旁边有几个指针,没有任何余地。

当我这样做时:

<div class="pointer"></div>
<div class="pointer"></div>
<div class="pointer"></div>
<div class="pointer"></div>
//also changed css to give .pointer a `float: left;` property

由于pointer:after的定义方式(左边是白色边框),所有指针在交叉点都会有这个丑陋的空白区域。所以我做的是:

<div class="pointer"></div>
<div class="pointer" style="z-index: -1;"></div>
<div class="pointer" style="z-index: -2;"></div>
<div class="pointer" style="z-index: -3;"></div>

是的,现在有效。但内联风格是这样的禁忌。所以它让我思考:有没有办法使用div为nth-of-type()作为变量来定义其z-index的信息?类似的东西:

div:nth-of-type(n) {
    //use magic to specify that `z-index = -n;`
}

1 个答案:

答案 0 :(得分:3)

您可以尝试使用SASS@for来实现您的目标。

@for $i from 1 through 3{
  div:nth-of-type(#{$i}) {
    z-index: -$i
  }
}

CSS输出

div:nth-of-type(1) {
  z-index: -1;
}

div:nth-of-type(2) {
  z-index: -2;
}

div:nth-of-type(3) {
  z-index: -3;
}

您也可以尝试使用LESS

希望这有帮助。