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>

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

这是生成的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适用于兄弟姐妹^{documentation}。这意味着计数器（在这种情况下为 odd ）适用于具有相同父级的元素。

如果您将每个.hjl打包在a中，则他们不再共享同一个父级，以便选择器尝试在{{}内找到奇数 .hjl元素{1}}元素并找到第一个元素（a中唯一存在的元素）。

因此，您应该更改选择器以使用a标记（也许应用a以获得更高的精确度）

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

Answer 2

您需要在它前面添加“：”，如下所示：

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

你的元素就像tr，li或类似的东西。希望有所帮助。

第n个儿童锚问题

2 个答案: