-1

私のページには多くのテーブルセルがあります。
各セルの中に1つのボックスがあります（中身を表示または非表示にするためにスポイラーコードを使用しています）。
ボックスはCSSで記述されています。 ボックスの外観は同じですが、色や背景画像を変更して、ボックスの数に相当する数回CSSを貼り付ける
ように、それぞれのプロパティをカスタマイズしたいと思います。各ボックスのコードの前にcssスタイルを貼り付けます。各ボックスの背景画像（デフォルトでは色は白）を変更しようとしていますが、これらの背景の1つを変更しようとすると、すべてのボックスの同じ背景が得られます。しかし、それは私が望むものではありません。フォルダにいくつかの写真がありますが、ボックスごとに異なる背景画像を作成できないようです。






これは私が使用するcssスタイルです。：

<style type='text/css'>
            div.myautoscroll {
            height: 80ex;
            width: auto;
            background: white;
            background-image: url(cieloprato.jpg);
            overflow: hidden;
            border: 1px solid #444;
            margin: 1em;
        }
        div.myautoscroll:hover {
            overflow: auto;
        }
        div.myautoscroll p {
            padding-right: 16px;
        }
        div.myautoscroll:hover p {
            padding-right: 0px;
        }


  </style>

1番目のボックスの背景画像はですcieloprato.jpg。しかし、box3 spiderman.gifの場合、bastman.pngのようにbox2に別の画像を挿入したいと思います。
ボックスごとに背景画像やCSSスタイルを変更するにはどうすればよいですか？
私の無知を許しなさい

4

2 に答える 2

1

なぜあなたはtdにクラスを与えないのですか？

.box1{background:url(cieloprato.jpg};
.box2{background:url(batman.png)};

このようにhtmlに入れます

<td class = "box1"></td>
<td class = "box2"></td>
于 2012-07-30T04:05:50.573 に答える
1

私は3つの方法があると思います：

まず、。cssプロパティを使用できますnth-*が、古いブラウザでは機能しません。

.myautoscroll:nth-of-type(2) { 
  background: #3e3;
}

このコードは、このクラスで3divの背景色を変更します。

第二に。div各要素にuniqueidentifierまたはを追加しclass、cssのセレクターに従って取得できます。

<div class="myautoscroll" id="mas1">...</div>
<div class="myautoscroll" id="mas2">...</div>

#mas1 {
  ...
}

#mas2 {
  ...
}

第三に。div必要な背景を指定する各要素style属性に追加でき

<div class="myautoscroll" style="background: #0f3">...</div>
<div class="myautoscroll" style="background: #1f3">...</div>

第四に。これはJavaScriptのループで行うことができます（これは単なる例です）。

var elements = document.getElementByClassName('myautoscroll');

for (var i in elements) {
  var el = elements[i];
  el.style.background = '#' + (i % 10) + 'f3';
}
于 2012-07-30T03:42:43.603 に答える