0

我有以下 html 结构，我使用图像对其应用圆角。tabsLeft 和 tabsRight 类的 div 实现了圆角。选择 li 后，我将向其添加“on”类。当第一个 li 有 .on 类时，左角的颜色也应该改变。当第一个 li 打开时，是否有唯一的 CSS 解决方案来更改 tabsLeft 类的图像？我不能将 tabsLeft 放在任何 li 内，因为并非所有列表项对每个用户都是可见的（任何列表项都可以是第一个）。

<div>
<div class="tabsLeft"></div>
<ul class="tabs" id="tabList" runat="server">
   <li id="a" class="on" runat="server"></li>        
   <li id="b" runat="server"></li>        
   <li id="c" runat="server"></li>        
   <li id="d" runat="server"></li>                      
</ul>
<div class="tabsRight"></div>
</div>

CSS -

.tabsLeft{background: url('/Home/images/New.PNG') -256px 0px no-repeat; width: 3px;height: 30px;float: left;position: absolute;}

.tabsRight{background: url('/Home/images/New.PNG') -263px 0px no-repeat;width: 3px;height: 30px;right: 0px;}

我想要的第一个活动选项卡上的 Css -

{background: url('/Home/images/New.PNG') -248px 0px no-repeat; width: 3px;height: 30px;float: left;position: absolute;}
4

1 回答 1

0

您可以根据父母的班级状态更改孩子的 CSS，但不能根据孩子的班级状态更改父母的 CSS。并且您不能根据完全不相关元素的类状态更改元素的 CSS。

但是，您可能会尝试将背景放在第一个LI本身上。然后，您可以根据自己的班级状态对其进行修改：

.tabs > li:first-child { background: url('/Home/images/New.PNG') -256px 0px no-repeat; etc... }
.tabs > li.on:first-child { background-position: -248px 0px; }

（显然，您需要使用样式以使其适合您的情况）

于 2013-01-11T08:03:48.600 回答