0

タグ内のすべてのボックスの画像の背景を変更しようとしました<td>が、これらの背景のいずれかを変更しようとすると、すべてのボックスの同じ背景が取得されます。しかし、それは私が望むものではありません。
これはページの側面です： ここに画像の説明を入力

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>

<div>各要素に一意の識別子またはクラスを追加して、 CSSのセレクターに従って取得しようとしましたが、何かが間違っています。

2 番目の背景を変更したいのですが、変更しようとするとcss、最初の背景も変更されます。両方のボックスの背景が同じであることがわかりますcieloprato.jpg。2箱目、3箱目に別の背景を挿入したいです。CSSコード
を変更するにはどうすればよいですか? これは私の HTML ページです

4

2 に答える 2

1

はい、すべての div.myautoscroll に設定された背景画像 (同じ画像が表示されます)。(たとえば) div.myautoscroll ごとにテーブルを生成するときに、'#myautoscroll_1','#myautoscroll_2'... '#myautoscroll_n' を追加できます。css コードを追加します。

#myautoscroll_1 {
   background-image: url(image_1.jpg);
}

#myautoscroll_2 {
   background-image: url(image_2.jpg);
}

#myautoscroll_n {
   background-image: url(image_n.jpg);
}
于 2012-07-30T17:07:09.127 に答える
0

または、CSSでは：nth-​​child（）疑似クラスを介して（1ベースの）インデックスで要素を選択できるため、次のようなことができます。

div.myautoscroll{ /*Generic formatting for all your boxes*/
    height: 80ex;
    width: auto;
    background: white;
    overflow: hidden;
    border: 1px solid #444;
    margin: 1em;
}
#example tr:nth-child(1) div.myautoscroll{
    /* Selects all boxes in the first row of your table,
       you can use :first-child here too */
    background-image: url(cieloprato.jpg); /* This, or any other image */ }
#example tr:nth-child(2) div.myautoscroll{
    /* Selects all boxes in the second row of your table. */
    background-image: url(some_other_image.jpg); /* The image for the second box */ }
#example tr:nth-child(3) div.myautoscroll{
    /* Same as above, just for the third row */
    background-image: url(yet_another_image.jpg); /* Third image */ }
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}
于 2012-07-30T18:10:02.917 に答える