Question

#mainbody :nth-child(1){
    border-color: #FFCC00;
}
#mainbody :nth-child(2) {
    border-color: #FFAA00;
}
#mainbody :nth-child(3) {
    border-color: #FF8800;
}
#mainbody :nth-child(4) {
    border-color: #FF6600;
}

这很尴尬，特别是如果再添加20个孩子。可以使用这样的东西，在calc()中提供rgb()位置并使用它吗？

还有另一种方法吗？（counter()？）

#mainbody h2 {
    border-color: rgb(255, calc( 255 / ( childposition / 4 ) ) ,0);
}

以下显示了承诺，但我认为rgb()不接受内部counter()：

body {
    counter-reset: headcolors 255;
}
h2:after {
    counter-increment: headcolors -34;
    content: "rgb(255," counter(headcolors) ",0);";
}
h2 {
    counter-increment: headcolors -34;
    color: rgb(255,counter(headcolors),0);
}

Answer 1

由于您没有说过只需要CSS解决方案，我建议您使用基于SASS / LESS的解决方案。

http://sassmeister.com/gist/925757ff999824ec0270

$baseColor: #FFCC00;

@for $i from 1 to 5 {
  #mainbody :nth-child(#{$i}) {
      border-color: adjust-color($baseColor, $green: ($i - 1) * 1);
  }
  $i: $i + 1;
}

上面的代码生成了这个：

#mainbody :nth-child(1) {
  border-color: #ffcc00;
}

#mainbody :nth-child(2) {
  border-color: #ffcd00;
}

#mainbody :nth-child(3) {
  border-color: #ffce00;
}

#mainbody :nth-child(4) {
  border-color: #ffcf00;
}

Answer 2

使用JS或pradeek建议的其中一个选项。截至目前，如果不是使用counter-reset和counter-increment，则无法在CSS母语中使用变量，但是您必须将它们与content一起使用，这样就可以了更改元素内显示的内容，它们不会被视为用于操作的变量。

Read here或here了解变量不适合CSS的原因。

Answer 3

使用jQuery，您可以在加载页面时执行以下操作：

$(document).ready(function(){
    var startfrom = 204; // CC in Hex, the starting value for the green color
    var endto = 255 - startfrom; // the ending value for the green color
    var limit = 4;
    for(var i = 1; i <= limit; i++)
    {
        $("#mainbody :nth-child("+i+")").css("border-color", "rgb(255,"+Math.round(startfrom - (startfrom - endto)*(i-1)/(limit-1))+",0)");
    }
});

通过4 children和20 children

查看jsfiddle

Answer 4

查看十六进制值，基本上每次只需将色调改为8。即：

#ffcc00 = HSL: 48° 100% 50%
#ffaa00 = HSL: 40° 100% 50%
#ff8800 = HSL: 32° 100% 50%

等

所以这就是你在LESS中这样做的方式：

@base: #ffcc00;
@numChildren: 5;
.loop(@counter, @color) when (@counter <= @numChildren) {

  h2:nth-child(@{counter}) {
    border: 5px solid @color;
  }
  @newColor: hsl(hue(@color) - 8, 100%, 50%);
  .loop((@counter + 1),@newColor);    // next iteration
}
.loop(1,@base); // launch the loop

<强> CODEPEN

上面的代码集会假设标记类似（5个孩子）：

<div class="mainBody">
  <h2>one</h2>
  <h2>two</h2>
  <h2>three</h2>
  <h2>four</h2>
  <h2>five</h2>
</div>

并生成以下CSS：

h2:nth-child(1) {
  border: 5px solid #ffcc00;
}
h2:nth-child(2) {
  border: 5px solid #ffaa00;
}
h2:nth-child(3) {
  border: 5px solid #ff8800;
}
h2:nth-child(4) {
  border: 5px solid #ff6600;
}
h2:nth-child(5) {
  border: 5px solid #ff4400;
}

Answer 5

Firefox 31+或29+（宽度options）问题（fiddle）：

HTML：

<div>
    <p><p><p><p>
</div>

CSS：

::root {
    --bg-color: #000000;
}

div :nth-child(1){
    --bg-color: #FFCC00;
}
div :nth-child(2) {
    --bg-color: #FFAA00;
}
div :nth-child(3) {
    --bg-color: #FF8800;
}
div :nth-child(4) {
    --bg-color: #FF6600;
}

p {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: var(--bg-color);
}

正如@Jose所说，counter函数仅用于content属性。但是vars现在已经在CSS中启用了。 Chrome和Firefox语法不同。有W3C CSS Variables Module Level 1（Chrome实施）和CSS Custom Properties for Cascading Variables Module Level 1两种规格（Firefox实施）。

逐渐改变颜色

5 个答案: