0

画像を使用して角を丸くする以下の html 構造があります。クラス tabsLeft と tabsRight を持つ div は、丸い角を実装します。li が選択されたら、それにクラス「on」を追加します。最初の li に .on クラスがある場合、左隅の色も変更する必要があります。最初の li がオンのときに tabsLeft クラスのイメージを変更する css のみの解決策はありますか?すべてのリスト項目がすべてのユーザーに表示されるわけではないため、どの li 内にも tabsLeft left を配置することはできません (任意のリスト項目が最初の項目になる可能性があります) ）。

<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 に答える