如何实现如下所示的第 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/