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

Question

我目前正在学习 CSS，发现自己发现了所有这些可爱的“CSS 形状”(https://css-tricks.com/examples/ShapesOfCSS/)，我只需要摆弄它们。尤其是“指针”之一（在底部）。

问题是，我希望有几个指针彼此相邻，没有任何边距。

当我这样做时：

<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;`
}

Answer 1

您可以尝试使用@for 或SASS 来实现您想要的。

@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

希望这会有所帮助。