第二子

Question

を選択し、私は、リストからタグを二を選択するために、これを使用しようとしています：

.container li a:first-child + a { ... } 

動作するようには思えません。理想的に純粋なCSSの方法がありますか（a:nth-child(2)以外）、どこに間違っているのか誰にでも見られますか？

Answer 1

はそれらが:first-childと隣接兄弟セレクタを無効にすることができるので、あなたの<li>は、実際には2つの<a>その最初の2人の子供としての要素、およびそれらの周りではない、いくつかの他の要素を持っていることを確認してください。あなただけに関係なく、あなたの<li>にある要素の他のどのような種類の二<a>要素を選択したい場合は

、このセレクタを使用します。

.container li a:nth-of-type(2) 

をする場合、あなたの<li>意志だけ正確に2つの<a>の要素を持っている、あなた

.container li a ~ a 

それとも、を見つけることが意味した：一般的な兄弟のボーナスIE7/IE8のサポートのために~をコンビネータ使用することができます（リストはおそらく<ul>または<ol>を参照している可能性があるため）<li>の2番目の<a>要素ではなく、2番目の<li>の要素が存在しますか？もしそうなら、あなたはこれらのセレクタのいずれかをお勧めします：ちょうど使用

.container li:first-child + li a 
.container li:nth-child(2) a 

Answer 2

を:nth-of-type：

.container li a:nth-of-type(2) { 
    /* ... */ 
} 

ここでの問題は、最初の<a>は最初の子ではない、または第二<a>であることをおそらくそれに隣接していない。それにかかわらず、:nth-of-typeは正しい方法です。

---

あなたは<li>につき1 <a>を持っている場合、あなたはおそらく.container li:nth-of-type(2) aを意味します。

Answer 3

私はあなたのアンカーは、リスト項目の中にされている疑いがある：

<ul class="container"> 
    <li><a href="">...</a></li> 
    <li><a href="">...</a></li> 
    <li><a href="">...</a></li> 
</ul> 

その場合は、あなたがにスタイルを書き換える必要があります：

.container li:first-child + li a { ... }