53

ブートストラップ「タブ」プラグインを使用して、順序付けられていないリストがあります。コードは次のようになります。

<ul>
  <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li>
  <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li>
  <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li>
  <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li>
</ul>

<a>CSS3を使用して、親<li>がクラスを持たないすべてのリンクの色を変更したいと思います.active。

私はこのようなことを試しました：

 a:not(li.active>a){
    color:grey;
}

しかし、役に立たない。これを行う方法はありますか、それとも間違った木を吠えていますか？

4

1 に答える 1

67

、などのコンビネータ>、+および子孫用のスペースは:not()、CSS内では許可されていません。それらはjQueryセレクターとしてのみ許可されます。あなたはこの他の質問でもっと知ることができます。

:not()そうは言っても、あなたは一人で使うことができて、その部分liを移動することができるかもしれません。ただし、これはあなたと要素> aの構造に依存します：ulli

li:not(.active) > a {
    color: grey;
}

たとえば、他のセレクターをいつでもチェーンできます。たとえば、そのクラスの親のみを持つ要素.span3に制限する場合などです。ali

li.span3:not(.active) > a {
    color: grey;
}

:not()ただし、マークアップを制御できる場合、または構造が少なくとも予測可能である場合（たとえば、親がどのような要素であるかを知っている場合）にのみ、この方法での使用に依存できることに注意してください。たとえば、あなたの場合は、アクティブなクラスがないli.span3 > a場合にのみスタイルを適用します。li.span3この情報を使用して、上記のいずれかのセレクターを作成できます。これは、期待どおりに機能するはずです。

于 2013-01-10T05:59:51.847 に答える