如何在CSS中用:nth-of-type类信息作变量？实现Pointer形状无间距并排

嘿，很高兴看到你在探索CSS形状的趣味玩法！针对你提到的两个需求，我来给你一步步拆解解决方案：

1. 让多个.pointer元素并排无间距展示 #

要实现多个带pointer类的<div>并排且完全无间距，有两种省心的方案，优先推荐Flexbox，它是现代布局的首选：

方法一：Flexbox布局（最简便） #

给这些.pointer元素套一个父容器，用Flex属性直接消除间距：

<div class="pointer-group">
  <div class="pointer"></div>
  <div class="pointer"></div>
  <div class="pointer"></div>
  <div class="pointer"></div>
</div>

.pointer-group {
  display: flex;
  gap: 0; /* 强制清除元素间的默认间距 */
}

/* 这里是你从形状集里拿到的pointer基础样式示例 */
.pointer {
  width: 80px;
  height: 80px;
  background: #42b983;
  position: relative;
}
.pointer::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #42b983;
}

方法二：Inline-block + 消除空格 #

如果你不想用Flex，也可以用inline-block，但要注意消除HTML元素间的空格（浏览器会把这些空格解析为默认间距）：

.pointer-group {
  font-size: 0; /* 消除父容器内的空格影响 */
}

.pointer {
  display: inline-block;
  font-size: 16px; /* 恢复子元素的字体大小 */
  /* 你的pointer形状样式 */
}

2. 将:nth-of-type的索引作为CSS变量使用 #

CSS本身没有直接把:nth-of-type()的索引值提取为变量的原生语法，但我们可以通过**自定义属性（CSS变量）**结合选择器来模拟，或者用预处理器批量生成样式：

方法一：原生CSS手动绑定变量 #

给每个:nth-of-type(n)设置对应的索引变量，之后就能在样式中自由引用：

/* 给每个位置的元素绑定索引变量 */
.pointer:nth-of-type(1) { --item-index: 1; }
.pointer:nth-of-type(2) { --item-index: 2; }
.pointer:nth-of-type(3) { --item-index: 3; }
.pointer:nth-of-type(4) { --item-index: 4; }

/* 举例：用变量生成不同的背景色 */
.pointer {
  background: hsl(calc(var(--item-index) * 70), 70%, 70%);
}

/* 或者用变量计算位置偏移 */
.pointer {
  transform: translateX(calc(var(--item-index) * 5px));
}

方法二：用Sass预处理器自动生成（高效批量） #

如果你用Sass，可以用循环自动生成所有:nth-of-type()的样式，不用手动逐个写：

@for $i from 1 through 10 { /* 10是你需要覆盖的元素数量 */
  .pointer:nth-of-type(#{$i}) {
    --item-index: #{$i};
    /* 直接在这里写基于索引的样式也可以 */
    background: hsl($i * 70, 70%, 70%);
  }
}

方法三：CSS计数器（适合内容中显示索引） #

如果只是需要在元素内容里展示索引，用CSS计数器更直接：

.pointer-group {
  counter-reset: pointer-count; /* 初始化计数器 */
}

.pointer {
  counter-increment: pointer-count; /* 每个元素递增计数器 */
}

.pointer::before {
  content: "第" counter(pointer-count) "个"; /* 显示索引文本 */
  color: #fff;
  padding: 4px;
}

这样就能灵活把元素的位置索引用在样式里啦！

内容的提问来源于stack exchange，提问作者Gettor