如何为列表中未选择的项加载不同的背景图像

Question

我正在使用简单模板在我的博客上自定义导航栏。

我通过声明这个变量成功地为列表的选定/悬停项设置了背景图像：

<Variable name="tabs.selected.background.image" description="Selected Tab Background Image" type="url" default="none" value="url(//u/r/l)"/>

并将此background: $(tabs.selected.background.image) repeat-x;添加到.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover部分。

现在，我想为未选择的列表项添加不同的背景图像。 所以，我添加了一个名为tabs.background.image的变量，现在我需要将它添加到样式中 关于标签，有以下几种：

• .tabs-内
• .tabs-inner .section
• .tabs-inner .widget ul
• .tabs-inner .widget li
• .tabs-inner .widget li a
• .tabs-inner .widget li：first-child a
• .tabs-inner .widget li.selected a，.tabs-inner .widget li a：hover

由于我是网络开发的新手，我尝试将新变量作为背景属性添加到：tabs-inner .widget li a，但在博客中没有背景图像。
所以，我尝试过创建这个选择：

.tabs-inner .widget li:not(li.selected) 

这是最后的补充：

.tabs-inner .widget li:not(li.selected) {
position: relative;
z-index: 1;
background: $(tabs.background.image);
}

但它不起作用。 我怎么能这样做？

Answer 1

将要用于取消选择的背景设置为所有项目。然后使用您当前的代码只更改所选项目的背景。是