css - 从特定子项之后开始的第 n 个子项模式

标签 css css-selectors styles

如何实现如下所示的第 n 个子模式:

div:nth-child(3n+1){
   background: #FF7100;
}
div:nth-child(3n+2){
   background: #FFB173;
}
div:nth-child(3n+3){
   background: #A64A00;
}

但要跳过例如第一个子项,并且仅在第一个子项之后启动此模式。我尝试像下面一样链接它,但它似乎不起作用:

 div:nth-child(n+1):nth-child(3n+1) {
    background: #FF7100;
}

最佳答案

使用 :not(:first-child) 选择器跳过第一个子项。

div:not(:first-child):nth-child(3n+1) {
  background: #FF7100;
}
div:nth-child(3n+2) {
  background: #FFB173;
}
div:nth-child(3n+3) {
  background: #A64A00;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

如果您想跳过每种样式的第一个元素,请尝试此

div:nth-child(1) ~ div:nth-child(3n+1) {
  background: #FF7100;
}
div:nth-child(2) ~ div:nth-child(3n+2) {
  background: #FFB173;
}
div:nth-child(3) ~ div:nth-child(3n+3) {
  background: #A64A00;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

关于css - 从特定子项之后开始的第 n 个子项模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39269364/

相关文章:

joomla - 如何设计 Joomla 2.5 文章的介绍文本样式?

CSS:相同的高度

css - 是否有 CSS 选择器来选择矩形框中的文本(内联 block )?

java - 使用 cssSelector 清除 Chrome 浏览器的浏览数据时如何与 #shadow-root (open) 中的元素进行交互

html - 使用 css 选择器 lastchild 和 :after together in angular2

jQuery to FadeOut 由 HTML 内联样式声明的背景图像

html - 如何处理CSS中的超链接?

php - 如何仅在成功注册时重置表单,但在提交失败时保留内容

html - 将面板设置为低于图像 < 768px

javascript - 动态更改样式表规则选择器