我有一个页面可以引入数据库条目并显示它们,并且我已经为所有其他条目/列表提供了这种样式:
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”,但没有任何区别)。
有没有人可以指导我?
谢谢 丹
最佳答案
:nth-child
在 sibling 之间工作 documentation .这意味着计数器(在本例中为 odd
)适用于具有相同父元素的元素。
如果您将每个 .hjl
包装在 a
中,那么它们将不再共享相同的父级,因此选择器会尝试查找 odd .hjl
元素在 a
元素内,只找到第一个(a
中唯一存在的一个)。
因此,您应该更改您的选择器以使用 a
标签(或许也应用 class
以获得更高的精度)
另一方面,将 div
和 h1/h2
元素放在 a
标签内是无效的,并且会导致其他问题。
关于css - 第 n 个子 anchor 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6669770/