html - CSS - nth-child() 例子

标签 html css css-selectors

在下面的示例中,每一行需要有三个文本列,即三个句子,其中中间的句子也需要有一个 background-color。是否可以使用 nth-child() 选择器 来做到这一点?

p {
  display: inline-block;
  width: 30%;
}

p:nth-child(2n+0) {
  background: red;
}
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

最佳答案

你可以使用

p:nth-child(3n+2) {
  background: red;
}

关于html - CSS - nth-child() 例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54177506/

相关文章:

html - 兄弟 div 在其他兄弟 div 的内部

html - 输入的值来自文件

jquery - 调整我的网页以适应不同的分辨率和移动设备

php - 我应该使用 PHP 还是 CSS 来生成 "hide"html?

javascript - 滚动浏览灰色部分后更改标题背景和字体颜色

android - Chrome Mobile 的神秘填充

javascript - 我们如何在拖放更改后保存 html 页面

带正则表达式的 CSS2 属性选择器

javascript - 我可以在 queryselector() 中使用 CONTAINS 的属性选择器吗?

CSS组合器优先级?