Css nthchild 在一个页面上工作，但不在另一个页面上

发布于06月04日

我正在用PHP和MySQL构建一个包含文章的网站，每一篇文章都可以包含 comments (很像一个典型的博客).每篇文章的页面都是这样的

<?php 
$blog_id = "1";

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

所有的代码都在博客上.php.

其目的是，每页上的 comments 应具有交替的背景 colored颜色，以便在一条 comments 结束和另一条 comments 开始时清晰可见.我正在使用这个CSS来实现它

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

因此，我的理解是，第一、三等 comments 应为浅灰色，而第二、四等 comments 应为白色背景.

The first article I created底部有一条 comments ，如预期的那样为灰色.The second article也有一条 comments ，但背景为白色.在Chrome中使用代码判断器表明它没有拾取CSS的"第n个子"行.当我临时添加第二条伪注释时，它的背景是灰色的，所以它似乎适用于偶数元素，而不是奇数元素.

我在这里读过许多类似的问题，但没有一个能帮我找到解决方案.我试过nth-child(odd)次而不是nth-child(2n+1)次，但没什么不同.我甚至try 将所有注释包装在另一个div中，并改用此CSS，但将其应用于注释中的嵌套段落确实会把事情搞砸.

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

如有任何切实可行的建议，将不胜感激.谢谢

Css nthchild 在一个页面上工作，但不在另一个页面上

推荐答案

Css相关问答推荐

相对于现有的转换3D应用关键帧动画

Mat-Form-字段占用更多区域，导致其他控件远离它

如何在点击时停止动画并将其返回到第一帧？

在 CSS 中跨列对齐文本基线

在 Shiny 中动态更改 bslib 值框的类

使元素不水平滚动

在 dbc.Container 上方包含横幅 - Dash

semantic-ui-react 使输入使用全宽度可用

如何禁用 Angular Material Pagination 按钮的波纹效果？

zoom 时闪烁的背景滤镜模糊

我怎样才能在某些区域制作一个单独的文本行，而在其他区域制作一个实心填充？

你能用 JavaScript 控制 GIF 动画吗？

Div Size 自动调整内容大小

li 中的第二行在 CSS-reset 后的项目符号下开始

删除所有填充和边距表格 HTML 和 CSS

Angular 动画的目的是什么？

当子元素水平溢出时，为什么忽略父元素的右填充？

如何知道哪个 HTML 元素导致了垂直滚动条

使用 CSS 更改
高度

仅使用 css 的换行符(如
)