Question

我有以下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;}

Answer 1

您可以根据父级的类状态更改子级的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; }

（显然你需要使用这些风格来使它适合你的情况）

活动列表项的圆角div

1 个答案: