是否存在每秒定位一次的 css 选择器.letter?
当然，我可以把所有.letter位于同一级别并使用的元素:nth-child(2n)，但它们都取决于前一个字母的位置，所以我需要嵌套。
.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);
}
.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>
</div>
如果你想玩only这里的着色是一个技巧，使用filter想法是使用180deg色调旋转在两次迭代后返回到初始颜色。这将模拟您的选择器。
它作为解决方案仍然有限，因为您需要调整滤镜以获得您想要的着色，这不是一项简单的任务
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
