0

我目前正在做这样的事情：

<div id="container">
 <div class="gridTab">
  Home
 </div>
 <div class="gridTab">
  Work
 </div>
 <div class="gridTab">
  Gallery
 </div>
 <div class="gridTab">
  Contact
 </div>
</div>

每个“gridTab”应该有不同的颜色。从上到下。

4

8 回答 8

2

使用nth-child伪类

.gridTab:nth-child(1){background:red}
.gridTab:nth-child(2){background:lime}
.gridTab:nth-child(3){background:green}
.gridTab:nth-child(4){background:violet}

演示

如果您正在寻找以下解决方案的 IE9，请使用以下方法

对于 IE7+ 支持

.gridTab:first-child {background:red}
.gridTab:first-child + div.gridTab{background:lime}
.gridTab:first-child + div + div.gridTab{background:green}
.gridTab:first-child + div + div + div.gridTab{background:violet}

IE7+ 演示

于 2013-01-31T07:40:16.973 回答
1

您应该添加另一个在元素之间产生差异的类。然后按该类设置它们的样式。

<div id="container">
 <div class="gridTab one">
  Home
 </div>
 <div class="gridTab two">
  Work
 </div>
 <div class="gridTab three">
  Gallery
 </div>
 <div class="gridTab four">
  Contact
 </div>
</div>

然后是 CSS：

.one {
  background: white;
}
.two{
  background: blue;
}
.three{
  background: red;
}
.four{
  background: black;
}
于 2013-01-31T07:39:38.870 回答
1

如果您希望您的颜色随机且不同，您可以使用它。它消除了您需要为其编写样式的 div 数量的限制。

$(document).ready(function() {
    $('.gridTab').each(function () {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
        $(this).css("background-color", hue);
    });
});

从这里引用

于 2013-01-31T07:47:17.700 回答
1

这是一个简单的代码：

$(".gridTab").each(function (i) {
  var colors = ["#CCCCCC", "#333333", "#990099", "#EEEEEE"];
  $(this).css("background-color", colors[i]);
});
于 2013-01-31T07:53:43.687 回答
0

您可以使用下面的nth-child伪样式表来使用样式表，也可以像最后一个 div 一样在 div 标签中使用样式属性。

<style>
.gridTab:nth-child(1){background-color: red;}
.gridTab:nth-child(2){background-color: green;}
.gridTab:nth-child(3){background-color: blue;}
.gridTab:nth-child(4){background-color: yellow;}
</style>

<div id="container">
 <div class="gridTab">
  Home
 </div>
 <div class="gridTab">
  Work
 </div>
 <div class="gridTab">
  Gallery
 </div>
 <div class="gridTab" style="background-color: yellow;">
  Contact
 </div>
</div>
于 2013-01-31T07:44:45.767 回答
0

如果您想要特定对象的特定属性，则应该使用 ID。

你的 CSS：

#yellowTab {background-color:yellow;}
#redTab {background-color:red;}
#greenTab {background-color:green;}
#blueTab {background-color:blue;}

HTML：

<div id="container">
 <div class="gridTab" id="yellowTab">
  Home
 </div>
 <div class="gridTab" id="redTab">
  Work
 </div>
 <div class="gridTab" id="greenTab">
  Gallery
 </div>
 <div class="gridTab" id="blueTab">
  Contact
 </div>
</div>
于 2013-01-31T07:45:17.340 回答
0

如果没有 css，你可以用 JQuery 做这样的事情：

$('.gridTab:first').css('background', 'red');
$('.gridTab:second').css('background', 'blue');

等等...

于 2013-01-31T07:46:21.277 回答
0

这也可以这样实现：http: //jsfiddle.net/Ezn26/

for (var i = 0; i <= $('.gridTab').length; i++) {     
    $('.gridTab').eq(i).addClass('red').end()
       .next('.gridTab').eq(i).addClass('green').end()
       .next('.gridTab').eq(i).addClass('blue').end()
       .next('.gridTab').eq(i).addClass('yellow');
}
于 2013-01-31T08:00:54.327 回答