3 
<style type="text/css">
#featured a:first-child
{
 background-color:yellow;
}
</style>

<div id="featured">
   <ul class="ui-tabs-nav">
     <li><a href="#"><span>test 1</span></a></li>
     <li><a href="#"><span>test 2</span></a></li>
     <li><a href="#"><span>test 3</span></a></li>
     <li><a href="#"><span>test 4</span></a></li>
   </ul>
</div>

リストから最初のアンカーを強調表示したかったのですが、残念ながらすべてのアンカーが強調表示されています。ここで行う間違いは何ですか。

4

3 に答える 3

7

aそれぞれが親の最初の子であるため、これらはすべて強調表示されますli

おそらく必要なのは次のようなものです。

#featured li:first-child a
{
 background-color:yellow;
}
于 2012-04-10T12:10:09.597 に答える
2

すべてのアンカーが両親の最初の子だからです。必要がある：

#featured li:first-child a {
    background-color: yellow;
}
于 2012-04-10T12:10:01.157 に答える
1

常にリストがある場合は、@powerbuoy や @danwellman などの CSS ソリューションを投稿することをお勧めします。任意のタグ内にネストされた最初のアンカー タグ ( idを使用featured) を任意のネスト レベルでフォーマットするだけの場合は、jQuery を使用することをお勧めします。

$('#featured a').first().css('background-color', 'yellow');

順序付けられていないリストではなく div を使用した例: http://jsfiddle.net/9vAZJ/
リストをフォーマットする同じ jQuery コード (質問のように): http://jsfiddle.net/9vAZJ/1/

jQuery コードはより一般的なソリューションであり、両方のソリューションがリスト タグから切り離されているため、質問のアンカー タグをフォーマットする最初の試みにより適しています。

それにもかかわらず、リストのスタイリングがここでの唯一のタスクである場合は、CSS ソリューションをお勧めします。

于 2012-04-10T12:32:03.730 に答える