Question

我有一个日历布局，它有行和列，每行肯定会有7列，因为在一周内会有7天。如何使用css定位每行的最后一项？

我被困在这个

li:nth-child(7)
li:nth-child(14)

等

有没有比在css中使用数学更好的方法？

Answer 1

您可以使用li:nth-child(7n)。

这样它每次只会定位li的第7个元素。

*{margin:0pc; padding:0px; box-sizing:border-box;}
li{ width:14.287%; display:inline-block;}
li:nth-child(7n){ color:red;}

<ul>
<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li>

</ul>

Answer 2

＆＃13;

ul li:nth-child(7n+0){ color: red }

＆＃13;

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

＆＃13;

Answer 3

尝试

li:nth-child(7n+0) {
    background: red;
}

实施例

<!DOCTYPE html>
<html>

<head>
    <style>
        li:nth-child(7n+0) {
            background: red;
        }
    </style>
</head>

<body>

    <li>The 1 li element.</li>
    <li>The 2 li element.</li>
    <li>The 3 li element.</li>
    <li>The 4 li element.</li>
    <li>The 5 li element.</li>
    <li>The 6 li element.</li>
    <li>The 7 li element.</li>
    <li>The 8 li element.</li>
    <li>The 9 li element.</li>

    <li>The 10 li element.</li>
    <li>The 11 li element.</li>
    <li>The 12 li element.</li>
    <li>The 13 li element.</li>
    <li>The 14 li element.</li>
    <li>The 15 li element.</li>
    <li>The 16 li element.</li>
    <li>The 17 li element.</li>
    <li>The 18 li element.</li>

</body>

</html>

Answer 4

使用以下内容选择每个第七个列表项：

li:nth-child(7n)

此外，您可以在http://nth-test.com/处测试nth-child个选择器。

Answer 5

请使用以下代码选择每个第七个列表项：

:nth-child(7n)

<!DOCTYPE html>
<html>

<head>
    <style>
        ul :nth-child(7n) {
            background: blue;
            color: white
        }
    </style>
</head>

<body>
   <ul>
    <li>li-1</li>
    <li>li-2</li>
    <li>li-3</li>
    <li>li-4</li>
    <li>li-5</li>
    <li>li-6</li>
    <li>li-7</li>
    <li>li-8</li>
    <li>li-9</li>
    <li>li-10</li>
    <li>li-11</li>
    <li>li-12</li>
    <li>li-13</li>
    <li>li-14</li>
    <li>li-15</li>
    <li>li-16</li>
    <li>li-17</li>
    <li>li-18</li>
    <li>li-19</li>
    <li>li-20</li>
    <li>li-21</li>
    <li>li-22</li>
   <li>li-23</li>
  </ul>

</body>

</html>

第二个孩子在css中乘以

5 个答案: