Question

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

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

当我这样做时：

<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

您可以尝试使用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

希望这有帮助。

使用＆＃34; nth-of-type＆＃34;在css中作为变量的信息类型

1 个答案: