html - 特定の商品をターゲットにする

Question

私のコード内には、次のようなリスト項目があります。

<div id="content">
<ul class="kwicks">
<li id="home"><span class="header"></span>

CSS 内では、次のようなスタイリングをしています。

 .kwicks li{
   display: block;
   overflow: hidden;
   padding: 0;
   cursor: auto;
   }

ただし、リスト項目ごとに異なる背景画像を使用したいのですが、それぞれを具体的にターゲットにするのに苦労しています。このコードスニペットは機能しません。

.kwicks li #home{
   background: url(../images/slider_bg2.png) no-repeat left
   }

どこが間違っていますか？

score 4 · Accepted Answer

次のようにスペースli #home.write を削除します。

.kwicks li#home{
   background: url(../images/slider_bg2.png) no-repeat left
   }

score 1 · Accepted Answer

セレクター

.kwicks li #home {}

は、次のマークアップ構造を想定しています。

<ul class="kwicks">
    <li>
        <span id="home" class="header"></span>
    </li>
</ul>

おそらくあなたが望むのは：（liと#homeの間にスペースなし）

.kwicks li#home {}

またはさらに良い（パフォーマンスの観点から）：

#home {}

ID は一意であるため、クラスや要素を指定する必要はありません。

2 に答える 2