0

最近CSSを勉強しています。

Nested ul li を使用しています。各 Ul に固有の同じ背景画像を実現する方法を教えてください。以下はコードです：

<ul class="display_BG_Blue_arw">
  <li>Coffee</li>
  <li>Tea
    <ul class="display_BG_Red_arw">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

where class="display_BG_Blue" --> その ul タグの各 li は、背景画像を青い矢印として表示する必要があります &&

class="display_BG_Red_arw" --> その ul タグの各 li は背景画像を赤い矢印として表示する必要があります

ところで、これらのものの小さなサイズの背景画像はどこで簡単に見つけることができますか..?

4

2 に答える 2

1

li親に基づいて要素を選択します。

.display_BG_Blue_arw > li {
    background-image: url(/path/to/blue_arrow.png);
    background-repeat: no-repeat; /* or whatever... */
    background-position: 0 50%; /* or whatever... */
}

.display_BG_Red_arw > li {
    background-image: url(/path/to/red_arrow.png);
    background-repeat: no-repeat; /* or whatever... */
    background-position: 0 50%; /* or whatever... */
}

>コンビネータの使用は、ネストされた/要素内の要素が同じ背景でスタイルされるのを防ぐためliに、 の直接の子孫/子である要素のみ.display_BG_Red_arwが赤い矢印でスタイルされることを指定することです。liulol

参考文献:

于 2012-10-03T19:48:38.393 に答える
0 
ul.display_BG_Blue_arw > li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}

ul > li ul.display_BG_Blue_arw li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}

また

ul > li ul li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}
于 2012-10-03T20:00:43.237 に答える