CSS3 Nth-child设置动态左侧位置[重复]

Posted 2023-03-06

【中文标题】CSS3 Nth-child设置动态左侧位置[重复]

【英文标题】：CSS3 Nth-child set dynamic left position [duplicate]

【发布时间】：2017-09-15 05:19:34

【问题描述】：

我在父 div 中有 20 个子 div。我想设置每个子 div 的动态左侧位置。我想使用 CSS 来做到这一点。

我知道 nth-child，但它不适用于 nth-child，因为 nth-child 将应用相同的左值。

例如：

#bars 
  height: 30px;
  left: 50%;
  margin: -30px 0 0 -20px;
  position: absolute;
  top: 50%;
  width: 400px;


.bar 
  background: #666;
  bottom: 1px;
  height: 3px;
  position: absolute;
  width: 3px;
  animation: sound 0ms -800ms linear infinite alternate;


.bar:nth-child(1) 
  left: 1px;
  animation-duration: 474ms;


.bar:nth-child(2) 
  left: 5px;
  animation-duration: 433ms;


.bar:nth-child(3) 
  left: 9px;
  animation-duration: 407ms;


.bar:nth-child(4) 
  left: 13px;
  animation-duration: 458ms;


.bar:nth-child(5) 
  left: 17px;
  animation-duration: 400ms;


.bar:nth-child(6) 
  left: 21px;
  animation-duration: 427ms;


.bar:nth-child(7) 
  left: 25px;
  animation-duration: 441ms;


.bar:nth-child(8) 
  left: 29px;
  animation-duration: 419ms;


.bar:nth-child(9) 
  left: 33px;
  animation-duration: 487ms;


.bar:nth-child(10) 
  left: 37px;
  animation-duration: 442ms;

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Codepen.

我想动态设置每个第 n 个孩子的左边。是否可以使用 nth-child 动态添加元素的左侧？

如您所见，我已将左侧设置为静态。我为每个子元素定义了left 值。虽然我想动态设置它。例如：

div:nth-child(2n) 
  left: n * 15;

有这样的可能吗？

【问题讨论】：

动态是什么意思？

如果你提供了一些关于你想要实现的细节，那会很有帮助，因为你可以在没有绝对定位/动态设置左值的情况下实现这样的视觉效果：codepen.io/anon/pen/XRXbdJ

如您所见，我已将左侧设置为静态。为每个子元素定义的左值。而我想动态设置。例如： div:nth-child(2n)left:n*15; 有可能这样吗？

@SahilDhir 不，你可以用 css 做到这一点

请edit 在你的问题中加入@jack，它将帮助那些试图回答你问题的人。你可以使用 CSS 预处理器吗？

【参考方案1】：

使用纯 CSS 是不可能的。有两种选择。

使用 CSS 预处理器

这个可以work as follows。

.bar 
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;


@for $i from 1 through 15 
  .bar:nth-child(#$i) 
    left: ($i * 10px);
  

然后，此 CSS 将被评估为以下内容。您可以将其包含在您的页面中，并且不必手动输入所有内容，而浏览器仍然可以处理它。

.bar 
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;


.bar:nth-child(1)  left: 10px; 
.bar:nth-child(2)  left: 20px; 
.bar:nth-child(3)  left: 30px; 
.bar:nth-child(4)  left: 40px; 
.bar:nth-child(5)  left: 50px; 
.bar:nth-child(6)  left: 60px; 
.bar:nth-child(7)  left: 70px; 
.bar:nth-child(8)  left: 80px; 
.bar:nth-child(9)  left: 90px; 
.bar:nth-child(10)  left: 100px; 
.bar:nth-child(11)  left: 110px; 
.bar:nth-child(12)  left: 120px; 
.bar:nth-child(13)  left: 130px; 
.bar:nth-child(14)  left: 140px; 
.bar:nth-child(15)  left: 150px; 

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

使用 javascript

这可以如下工作。

  let i = 0;
  for (let bar of document.querySelectorAll('.bar')) 
    bar.style.left = (10 * ++i) + 'px';
  

.bar 
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

请注意，如此简单的事情不需要 jQuery。

还有一个不使用 ES6 语法的版本（let 和 for...of）。

var i, bars = document.querySelectorAll('.bar');
for (i = 0; i < bars.length; ++i) 
  bars[i].style.left = (10 * (i + 1)) + 'px';

.bar 
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

两个版本都使用querySelectorAll。

【讨论】：

感谢您的帮助！我在哪里放 css 处理器代码？它在 .css 文件中有效吗？实际上我对css处理器一无所知。因此，如果您可以分享任何有助于像我这样的人了解 css 处理器的好资源。

你把它放在一个单独的文件中并从中生成一个 CSS 文件。你可以了解更多here，或try it online。