4

私は次のhtml構造を持っています。

<ul>
  <script id="agendaTmpl" type="text/x-jquery-tmpl">
               <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');">

                </li>
    </script>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
</ul>

リストの最初のliにクラスを適用する必要があります。スクリプトタグは削除できません。これは構造のテンプレートです。試してみましul > li:first-childたが、動作しません。liがulの最初の子である場合、つまりスクリプトタグが存在しない場合にのみ機能します。

ulの最初のliにスタイルを適用する方法を教えてください。

注：最初のliに新しいクラスを追加することは許可されていません。

4

3 に答える 3

11

first-of-type代わりに使用してみてください：

ul > li:first-of-type

これはCSS3セレクターであるため、古いブラウザーでは完全にはサポートされていません。クロスブラウザのサポートを大幅に改善するには、@Boltclockの回答を参照してください

于 2012-05-14T09:11:34.977 に答える
2

liがulの最初の子である場合、つまりスクリプトタグが存在しない場合にのみ機能します。

その通り。

jQueryテンプレートを使用していて、最初のテンプレートを操作しliてHTMLソースを変更せずにクラスを与えようとしているので、これをすべてjQueryで行うこともできます。

$('ul > li:first').addClass('first');
于 2012-05-14T09:11:33.043 に答える
0

隣接するアイテムのリストの最初のアイテムをすべて選択するためのトリックもあります。

li:not(li + li) {
  background: #f00;
}

/* Or the more intuitive one: */
ul > :not(li) + li, ul > li:first-child {
  background: #f00;
}
<ul>
 <div></div>

 <li>I'm selected</li>
 <li>test</li>
 <li>test</li>

 <div></div>

 <li>I'm selected</li>
 <li>test</li>
</ul>

于 2022-01-20T02:09:40.613 に答える