2

わかりました、CSS のみでこれを解決しようとして立ち往生していますが、それが可能かどうかは完全にはわかりません。そのため、JavaScript に頼る前にここで質問する必要があります。

次のリストcolumn-titleの最初のクラスを持つ兄弟をターゲットにする必要があります。<li>

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="column-title">Item 4</li>
    <li>Item 5</li>
</ul>

兄弟がどの位置にいてもよいことを考慮してください。たとえば、次のようになります。

(5位)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="column-title">Item 5</li>
</ul>

(3位)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li class="column-title">Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

これはCSSだけでは不可能だと思いますよね？

ありがとう。

編集 -

ああ、私は解決策を見つけました：

兄弟コンビネータを使用してください: ~

.column-title ~ .column-title { background:#ddd; }

.column-titleこのようにして、プロパティは最初のliのすべての兄弟に適用されます。

PS。クロウジョナが彼の投稿をしているのと同時に答えを見つけました。とにかく、私は彼の答えを選択した答えとして選びました。

4

2 に答える 2

5

半サポートの「一般的な兄弟コンビネータ」を試すことができ~ます。何かのようなもの：

li.column-title ~ li.column-title {color: red;}

これは、それが行われていることを示す基本的なフィドルです。

そして、それがあなたの路地にある場合は、IE7のサポートのためにこのようなシムが必要になるかもしれません.

あなたの更新を見て、最良の結果を得るには、li.column-title の最初のインスタンスを兄弟ルールから除外する場合は、次を指定する必要があることを知っておく必要があります:first-child。

ul li.column-title:first-child {color: blue;}
ul li.column-title:first-child ~ li.column-title {color: red;}​
于 2012-11-15T21:35:12.537 に答える
2

notフィルターを使用するのはどうですか？

これがデモンストレーションするjsfiddleです。

ul>li.column-title:not(:first-child) {
  color: red;
}​

css3であるため、IE9より前ではサポートされません。

于 2012-11-15T21:39:29.277 に答える