css - 选择一系列嵌套元素中的每隔一个元素(每个元素只有一个子元素)

Question

<分区>

Answer 1

如果你只想玩着色，这里有一个使用filter的技巧，其想法是使用180deg hue-rotation两次迭代后返回初始颜色。这将模拟您的选择器。

它作为解决方案仍然有限，因为您需要调整过滤器以获得您想要的着色，这不是一项简单的任务

.firstname {
  position: relative;
  height: 40px;
  width: 40px;
  margin: 75px 0 0 75px;
  border: 1px solid red;
}

.letter {
  position: absolute;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  background: rgba(0, 0, 255, 0.2);
  color:red;
  filter: hue-rotate(180deg) saturate(2);
}

.letter>div {
  transform: rotate(-40deg);
  top: 100%;
}

<div class="firstname">
  <div class="letter s">S
    <div class="letter e">E
      <div class="letter b">B
        <div class="letter a">A
          <div class="letter s2">S
            <div class="letter t">T
              <div class="letter i">I
                <div class="letter a2">A
                  <div class="letter n">N</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>