2

部分的なhtmlがあります：

<ul>
    <li class="class1">AFFECTED</li>
    <li class="class1 class2">NOT</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li class="class1 class2">NOT</li>
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li>NOT</li>  
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

class1 のみのリストの最初の li には、ユニバーサルcss-selectorが必要です。

  • 余分なクラス (class2) を持つ li は影響を受けてはなりません。
  • class1 の最初の li のみを選択する必要があります (A の外観を変更するため)。
  • JS/jQuery はありません。
  • li は float であるため、ハードコーディングされた nth-child はありません。
  • コードは自動的に生成されるため、カスタム クラスを追加/削除することはできません。

:not(class2), [class2] :first-child & :first-of-type を使用しようとしましたが、役に立ちませんでした。

ありがとう！

解決策: http://jsfiddle.net/6hxZa/3/

4

3 に答える 3

5

class2セレクターから明確に除外する場合は、次を使用します。

li.class1:first-child:not(.class2) { }

使用以外の追加のクラスを除外する場合class1:

li[class=class1]:first-child { }

他の/将来のスタイルとの干渉が少ないため、除外するクラスがわかっている場合は最初のものをお勧めします。

#1 の jsFiddle: http://jsfiddle.net/Cmypc/ #2 の jsFiddle: http://jsfiddle.net/Cmypc/1/

編集セレクターを探している場合、:first-of-classセレクターはありません (このスレッドを参照してください)。将来の解決策は:nth-matchセレクターかもしれませんが、CSS4 を待つ必要があります。または、回避策として、より精巧なクリア セレクターを使用して、適用されたスタイルを元に戻すことができます (BoltClock の回答を参照)。

于 2013-04-04T15:06:47.793 に答える
0

これを試して

li:first-child
{
...
}

これはクラス1専用です

li.class1:first-child
{
color:#ff0000;
}

ここにフィドルがあります

class2 のリストに影響を与えたくない場合は、これでうまくいくかもしれません

    li.class1.class2:first-child
    {
        ...
        code that will reset
    }
于 2013-04-04T15:02:07.403 に答える