n番目の子アンカー問題

Question

I持ちでデータベースエントリをもたらし、それらを表示し、私はこのスタイルリスト/他のすべてのエントリを与えているページ：

hjl:nth-child(odd) { background: #F2F2F2;} 

を、これは私のHTML/PHPで

<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>"> 
<div class = "hjl"> 
<div class = "hjldate"> 
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p> 
</div>  
<div class = "hjljobinfo"> 
<h1><?php echo $rsjobinfo['job_title'];?></h1> 
<h2><?php echo $rsjobinfo['company_name'];?> |</h2> 
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p> 
</div> 
</div> 
</a> 

しかし、アンカータグの各エントリ全体をラップしようとすると、すべてのエントリが上記の背景スタイルに変わり、「奇数」は認識されなくなります。

これは、生成のHTMLです：私はそれを修正するかどうかはわかりませんので、私は（私はA「を追加することで遊んで試してみたn番目の子を使用することに慣れていない

<a href="paging.php?job_id=253"> 
<div class = "hjl">     
    <div class = "hjldate"> 
    <p>Posted on:<br />11 Jul 2011</p> 
    </div> 

    <div class = "hjljobinfo"> 
    <h1>Entry One</h1> 
<h2>Company |</h2> 
<p class = "location">New York, NY, USA</p> 
</div> 

</div> 
</a> 

'しかし、それは何の違いもありません）。

誰も私に向かって私を蹴ることができる任意のポインタがありますか？

おかげ ダン

Answer 1

:nth-childは、兄弟の間で動作します^{documentation}。つまり、カウンタ（oddの場合は）は、同じ親を持つ要素に適用されます。

あなたはaで各.hjlをラップした場合、セレクタはa要素内奇数.hjl要素を見つけようとすると、ちょうど最初の1（aに存在する唯一のを見つけたので、彼らはもはや、同じ親を共有しません）。

だから、あなたはaタグがあるの内側にdivとh1/h2要素を配置し、別のノートに

---

（より精密のためだけでなく、おそらくclassを適用）aタグで動作するようにあなたのセレクタを変更する必要があります無効で、その他の問題が発生します。

Answer 2

あなたは追加する必要があります「：」のようなので、それの前に右、：

YourElement:nth-child({ number expression | odd | even }) { 
declaration block 
} 

あなたの要素はTR、李、またはそのようなもののようなものです。希望が役立ちます。