CSS 挑战 : display only one instance of an element on a page

Question

我正在尝试在我将列表作为短代码插入的位置显示相关帖子列表，但隐藏由我的相关帖子插件 (MicroKids) 自动插入的列表。我已经为短代码生成的列表分配了一个类；我无法对自动插入的列表进行任何更改。

例如，在 http://www.litquake.org/calendar-of-events/the-future-that-never-was 上，您会看到 map 上方显示的作者姓名列表(以 Murray、Tina Marie 开头)(我想显示的短代码插入列表)和 map 下方显示的重复作者姓名列表(自动我想隐藏的已插入列表)。

这是代码的简化版本:

<div class="entry-content clearfix">
<p>
<div class="show-related-posts" style="padding-left: 30px;">
<div class="related-posts">
</div>
<div id="em-location-map-ca500" class="em-location-map" style="background: none repeat scroll 0% 0% rgb(205, 205, 205); width: 400px; height: 300px; position: relative; overflow: hidden;">
<div id="em-location-map-info-ca500" class="em-location-map-info" style="display:none; visibility:hidden;"> </div>
<div id="em-location-map-coords-ca500" class="em-location-map-coords" style="display:none; visibility:hidden;">
<div class="related-posts">
<div id="related-posts-MRP_all" class="related-posts-type">
</div>

有谁知道我如何定位列表中的一个而不是另一个？

Answer 1

你有两个选择:

1. 要么给他们一个额外的类，例如 class="related-posts related-posts-1"，然后使用该类选择它。

2. 或者您可以使用 .related-posts:first-child 或 .related-posts:last-child 作为选择器。