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}

デモ

以下のソリューションを探している場合は、次の方法を使用してください

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 属性を使用できます。

<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 に答える