html - CSS/HTML 使用计数器设置颜色

Question

我决定学习一些 CSS/HTML

我正在制作一个大致跟随 this 的导航栏教程。 我喜欢子链接与他的选项卡父链接颜色不同的方式。我想更进一步，不是所有顶部链接都是白色的，子链接是蓝色的，每个子列表都比其父列表从白色到黑色逐渐变暗。

首先，我尝试使用 nth-child 来执行此操作，但在发现不能仅将 n 用作值作为参数后放弃了该方法。

现在我正在尝试使用计数器在每个 child 从白人 (255,255,255) 到黑人之前减少。减少计数器不是问题，但是将计数器分配给背景颜色没有任何作用，(其中 background-color: rgb(0,0,0,) 会)

background-color: rgb(content: counter(Counter_Red),content: counter(Counter_Green),content: counter(Counter_Blue));

这是一段不起作用的代码。 他们有什么办法让它工作或改变网络方法吗？

Answer 1

你可以简单地添加一个 background-image linear-gradient 到 uls:

ul {
  width: 100px;
  background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(250,250,250) 91%);
  background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(250,250,250) 91%);
  background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(250,250,250) 91%);
  background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(250,250,250) 91%);
  background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(250,250,250) 91%);;
}

这是一个非常简单的 js fiddle example来说明。

MDN explanation
Simple gradient generator