sibling-index()
sibling-index() CSS 函数返回一个整数，表示当前元素在 DOM 树中相对于其所有同级元素的位置。返回的值是上下文子元素在其父元素中所有同级元素中的索引号，第一个子元素返回 1，最后一个子元素返回 Element.children 的 length。
注意：与 :nth-child() 伪类一样，sibling-index() 从 1 开始，而不是 0。
试一试
--width: calc(sibling-index() * 30px);
--width: calc(sibling-index() * 20px);
--width: calc(sibling-index() * 10px);
--width: 100px;
<ul id="example-element">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
#example-element {
list-style-type: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
#example-element > li {
text-align: center;
padding: 2px;
border-radius: 8px;
width: var(--width, calc(sibling-index() * 30px));
color: white;
background-color: hsl(
calc(360deg / sibling-count() * sibling-index()) 50% 50%
);
}
语法
css
sibling-index()
参数
sibling-index() 函数不接受参数。
返回值
一个整数；当前元素在 DOM 树同级顺序中的位置。
示例
动态列表宽度
此示例演示如何将 <ul> 中每个 <li> 项的宽度动态增加 50px。
HTML
html
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
css
li {
width: calc(sibling-index() * 50px);
background-color: #ffaaaa;
}
结果
顺序动画
将 sibling-index() 与 CSS 动画结合开辟了新的可能性。在此示例中，通过根据元素在 DOM 中的顺序设置 animation-delay，使元素的透明度按顺序变化。
HTML
我们包含一个包含四个子元素的容器元素
html
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
我们将 fade-in 动画应用于每个元素。我们使用 calc() 函数中的 sibling-index() 函数，根据源元素在源顺序中的位置设置 animation-delay 的持续时间。animation-fill-mode 会在 animation-duration 到期之前应用动画的 0% 关键帧。
css
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
animation-name: fade-in;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: backwards;
animation-delay: calc(1s * sibling-index());
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
结果
规范
| 规范 |
|---|
| CSS 值和单位模块 Level 5 # funcdef-sibling-index |
浏览器兼容性
加载中…