css - 第 n 个子 anchor 问题

Question

我有一个页面可以引入数据库条目并显示它们，并且我已经为所有其他条目/列表提供了这种样式:

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>

但是，当我尝试将每个完整条目包装在一个 anchor 标记中时，每个条目都会更改为上面列出的背景样式，不再识别“奇数”。

这是生成的 HTMl:

<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>

我不习惯使用 nth-child，所以我不确定如何修复它(我试过在上面添加一个“a”，但没有任何区别)。

有没有人可以指导我？

谢谢丹

Answer 1

:nth-child 在 sibling 之间工作 ^{documentation} .这意味着计数器(在本例中为 odd)适用于具有相同父元素的元素。

如果您将每个 .hjl 包装在 a 中，那么它们将不再共享相同的父级，因此选择器会尝试查找 odd .hjl 元素在 a 元素内，只找到第一个(a 中唯一存在的一个)。

因此，您应该更改您的选择器以使用 a 标签(或许也应用 class 以获得更高的精度)

---

另一方面，将 div 和 h1/h2 元素放在 a 标签内是无效的，并且会导致其他问题。