如何为不同的条目创建具有不同背景图像的有序列表 (HTML/CSS)？

Question

我已经设置了这个导航栏菜单，具有多层背景，以便悬停和当前选项卡上的颜色发生变化。但是，到目前为止，我所拥有的配色方案主要是绿色，在同一个列表中，我想将下一个“块”选项卡设为蓝色，将第三个块设为红色。我有更多的图像准备好多层和东西，但我似乎无法让该死的东西覆盖每个 li 条目的背景，因为主要的东西是在 ol 本身上编码的。它实际上只是在“ol#vin a {”和“ol#vin span {”上加载图像；其余选项（悬停、当前等）仅更改背景位置，以便我的多层图像向下转换为适当的状态。

如果有帮助，我会以此为基础：http://blixt.org/articles/tabbed-navigation-using-css#section=bonus 他有标签列表，但我让它在左侧垂直向下，并带有我自己的背景。

E：根据要求，代码 sn-ps：

<table width="100%" border="0" cellpadding=0 cellspacing=0><tr valign="top">
<td width="260px">
    <ol id="vin">
        <li class="au"><a href="#sc-aaaa"><span>Section A</span></a></li>
        <li class="au"><a href="#sc-bbbb"><span>Section B</span></a></li>
        <li class="au"><a href="#sc-cccc"><span>Section C</span></a></li>
        <li class="au"><a href="#sc-dddd"><span>Section D</span></a></li>
        <li class="au"><a href="#sc-eeee"><span>Section E</span></a></li>
        <li class="au"><a href="#sc-ffff"><span>Section F</span></a></li>
    </ol>
</td><td style="background:#ccc">
    <div class="content" id="sc-aaaa">
        <h2>Section A</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-bbbb">
        <h2>Section B</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-cccc">
        <h2>Section C</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-dddd">
        <h2>Section D</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-eeee">
        <h2>Section E</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-ffff">
        <h2>Section F</h2>
          Content goes here!
    </div>
</td></tr></table>
activatables('section', ['sc-aaaa', 'sc-bbbb', 'sc-cccc', 'sc-dddd', 'sc-eeee', 'sc-ffff']);
</script>
</body>
</html>

和 CSS：

ol#vin {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 16px Verdana, sans-serif;
}

ol#vin li {
    margin: 0 0 0 0;
}

ol#vin a {
    color: #ccc;
    display: block;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
}

ol #vin #au a {background: url(vtabs.png) no-repeat;}
ol #vin #ma a {background: url(vtabs2.png) no-repeat;}

ol#vin a:hover {
    background-position: 0 -52px;
    color: #000;
}

ol#vin a:hover span {
    background-position: 100% -52px;
}

ol#vin li a.active {
    background-position: 0 -26px;
    color: #fff;
    font-weight: bold;
}

ol#vin li a.active span {
    background-position: 100% -26px;
}

ol#vin span {
    display: block;
    line-height: 25px;
    padding-right: 30px;
}

ol#vin #au span {background: url(vtabs2.png) 100% 0;}
ol#vin #ma span {background: url(vtabs2m.png) 100% 0;}

Answer 1

这将有助于为元素定义特定的 ID 或类，然后您可以为每个 ID 或类指定背景图像。

原创

来自链接示例：http://blixt.org/articles/tabbed-navigation-using-css#section=bonus

<ol id="toc">
    <li><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

解决方案

HTML

<ol id="toc">
    <li id="first_li"><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li id="second_li"><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

CSS

/* Usual states */
#toc li#first_li {
    background-image: url('/img/first_background.jpg');
}

#toc li#second_li {
    background-image: url('/img/second_background.jpg');
}

/* Hover states */
#toc li#first_li:hover {
    background-image: url('/img/first_background_highlight.jpg');
}

#toc li#second_li:hover {
    background-image: url('/img/second_background_highlight.jpg');
}

Answer 2

嗯，您只能使用 JavaScript 解决方案来实现它，因为 CSS 规范不允许您为父元素设置样式。一个使用 jQuery 的例子：

<ul id="nav">
    <li data-color="#00f"><a href="#">Link</a></li>
    <li data-color="#0f0"><a href="#">Link</a></li>
    <li data-color="#f00"><a href="#">Link</a></li>
</ul>

还有脚本：

var $nav = $("#nav");
$nav.find("li").hover(function () {
    $nav.css("backgroundColor", $(this).attr("data-color"));
}, function () {
    $nav.css("backgroundColor", "");
});