CSS / HTML 使用计数器设置颜色答案

【问题标题】：CSS / HTML Using a counter to set a colourCSS / HTML 使用计数器设置颜色
【发布时间】：2013-09-02 16:21:49
【问题描述】：

我决定学习一点 CSS / HTML

我正在大致按照this 教程制作导航栏。我喜欢子链接与他的标签父链接的颜色不同。我想更进一步，而不是将所有顶部链接设为白色，将子链接设为蓝色，以使每个子列表从白色到黑色逐渐比其父级更暗。

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

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

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

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

【问题讨论】：

您是否尝试过> 选择直系子女而不是孙子女？你可以试试ul > li { color:black; } ul > li > ul > li { color:white; }

标签： html css colors navigation counter

【解决方案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

【讨论】：

这与我要找的很接近。他们是否有任何方法可以使每个链接框的渐变为实心，即：框 1-纯白色，框 2-纯浅灰色，框 3-纯灰色，等等...-纯黑色而不是逐像素差异

【解决方案2】：

试试

CSS

nav ul li a {
color:#000;
    background:#FFF;
}
nav ul ul li a {
color:#000;
    background:#FFF;
}

您还可以使用http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/ 提供的多级 jquery 菜单

【讨论】：