Question

我遇到问题是让我的NTH：CHILD代码在特定页面上阅读。它正在工作，现在我检查我的存档页面，它将无法识别代码。它正在主页上工作。

http://sc103.radiobrandbuilders.com

但是，如果您检查存档页面，缩略图无法识别CSS。假设从每个第二个图像中删除边距，使其显示在一行上。

http://sc103.radiobrandbuilders.com/tag/mick-jagger/

以下是我在样式表中使用的当前代码：

.main-page-thumbnail:nth-child(2n+0) {
margin-right: 0px;
}

当我第一次这样做时它正在工作，现在我无法弄清楚为什么存档页面不会从样式表中读取。

感谢。

Answer 1

您的HTML结构不同，在“非归档”页面中您有类似

的内容

<div id="leftcolumn">
   <div class="main-page-thumbnail">...</div>
   <div class="main-page-thumbnail">...</div>
   <div class="main-page-thumbnail">...</div>
   <div class="main-page-thumbnail">...</div>
</div>

但是在您的存档部分中，您的“主页 - 缩略图”不会共享同一个父级（它们当前包含在<article>元素中），因此严格来说，它们始终是父母的“第一个孩子”。

Answer 2

您的标记在两个页面之间不一致。为了让:nth-child()选择器工作，子元素必须是兄弟元素。

例如，在主页上，标记看起来像这样（有效）：

<div class="main-page-thumbnail">...</div>
<div class="main-page-thumbnail">...</div>
<div class="main-page-thumbnail">...</div>

您的内页标记看起来像这样（不起作用）：

<article>
    <div class="main-page-thumbnail">...</div>
</article>
<article>
    <div class="main-page-thumbnail">...</div>
</article>

您可以在内页上更改标记，也可以添加类：

article:nth-child(2n+1) > .main-page-thumbnail {
    margin-right: 0;
}

NTH：儿童在某些网站页面上未被识别

2 个答案: