Question

我想知道是否可以使用CSS nth-child选择器选择第4项之后的每个偶数项。

以下是我到目前为止的情况？任何想法

SCSS

.project{
    @include span-columns(4 of 8);
    @include omega(2n);
    height: 580px;
    border: 1px solid black;

    &:first-child{
        margin-top: 55px;
    }

    &:nth-child(n+4){
        margin-top: -50px;
    }
}

Answer 1

:nth-child(2n+6)将匹配从第6项开始的所有其他项目。

div:nth-child(2n+6) {
  color: red;
}

<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>
<div>blah</div>

Answer 2

为了在第四项之后选择每一秒项，您正在寻找:nth-child(2n+6)：）

div:nth-child(2n+6) {
  color: red;
}

<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>

希望这有帮助！：）

Answer 3

div:nth-child(2n+6) {
  color:#ff0000;
}

<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>11</div>
<div>12</div>

选择4之后的每个偶数项

3 个答案: