nth-child 在一页上工作，但不能在另一页上工作

Question

我正在构建一个包含文章的 PHP 和 MySQL 的网站，并且每篇文章都可以包含评论（很像典型的博客）。每个文章页面是这样的

<?php 
$blog_id = "1";

include("../includes/blog.php");
?>

所有代码都在 blog.php.

目的是让每一页上的评论都应该有交替的背景颜色，以便在一条评论结束和另一条评论开始时清楚地显示出来。我正在使用这个 CSS 来实现它

.comment:nth-child(2n+1){background-color:rgba(0,0,0,0.075)}

所以我的理解是第一条、第三条等评论应该是浅灰色的，而第二条、第四条等应该是白色背景。

The first article I created has one comment at the bottom and it is grey as expected. The second article 也有 1 个评论，但背景为白色。在 Chrome 中使用代码检查器表明它没有选择 CSS 的“第 n 个子”行。当我临时添加第二个虚拟评论时，它有一个灰色背景，所以它似乎适用于偶数元素而不是奇数元素。

我在这里阅读了许多类似的问题，但其中 none 让我找到了解决方案。我试过 nth-child(odd) 而不是 nth-child(2n+1) 但没有任何区别。我什至尝试将所有评论包装在另一个 div 中并使用此 CSS 代替，但这确实将其自身应用于评论中的嵌套参数，从而把事情搞砸了。

.comment-wrapper :nth-child(2n+1){background-color:rgba(0,0,0,0.075)}

如有任何实用建议，我们将不胜感激。谢谢。

Answer 1

nth-child 伪选择器实际上作用于子项，而不是父项。

此 CSS 选择器查找具有 class .comment 的奇数子元素：

.comment:nth-child(2n+1)

.comment:nth-child(2n+1) {
  color: red;
}

<div class="comment">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>
<div class="comment">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

此 CSS 选择器查找具有 class .comment:

的元素的奇数直接子元素

.comment > :nth-child(2n+1)

.comment > :nth-child(2n+1) {
  color: red;
}

<div class="comment">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>
<div class="comment">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

您的新规则如下所示：

.comment > :nth-child(2n+1) {
  background-color: rgba(0,0,0,0.075);
}

> 直接子组合器而不只是 space （后代组合器）的原因是我们不会像你一样在评论中定位嵌套元素在您的其他尝试之一中提到过您。

我建议在您的选择器中使用 odd 以提高可读性并使用新的 CSS 颜色语法：

.comment > :nth-child(odd) {
  background-color: rgb(0 0 0 / 0.075);
}

Answer 2

最终的解决方案是将注释包装成一个包装器 div，然后按照 Zach Jensz 的建议使用“>”。

 .comment-wrapper > :nth-child(odd){background-color:rgb(0 0 0 / 0.075)}

nth-child 在一页上工作，但不能在另一页上工作

nth-child Works on One Page But Not Another

css

css-selectors