Der*_*air 232 css css-selectors css3
是否可以选择一组元素中的每个第四个元素？
例如:我有16个<div>元素......我可以写类似的东西.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
有一个更好的方法吗？
Bol*_*ock 407
顾名思义,除了常数之外,还允许您使用变量构造算术表达式.您可以执行加(),减法()和系数乘法(其中是整数,包括正数,负数和零).:nth-child()n+-ana
以下是重写上述选择器列表的方法:
div:nth-child(4n)
有关这些算术表达式如何工作的解释,请参阅我对此问题的回答以及规范.
请注意,此答案假定同一父元素中的所有子元素具有相同的元素类型div.如果您有任何其他不同类型的元素,例如h1或p,您将需要使用:nth-of-type()而不是:nth-child()确保您只计算div元素:
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>
对于其他所有内容(类,属性或这些的任意组合),您正在寻找与任意选择器匹配的第n个子项,您将无法使用纯CSS选择器执行此操作.看看我对这个问题的回答.
顺便说一句,4n和4n + 4之间没有太大区别:nth-child().如果使用n变量,它将从0开始计数.这是每个选择器匹配的内容:
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...
如您所见,两个选择器都将匹配与上面相同的元素.在这种情况下,没有区别.
Tom*_*lak 24
div:nth-child(4n+4)
请参阅:http://css-tricks.com/how-nth-child-works/
您需要nth-child伪类的正确参数.
参数应该是在的形式an + b,以匹配每一个个孩子从B开始.
这两个a和b是可选的整数,既可以是零或负数.
a为零,则没有"每次个孩子"的条款.a是否定的,那么匹配从后向开始b.b为零或负,则可以使用正数来表示等效表达式,b例如4n+0相同4n+4.同样4n-1如此4n+3.例子:
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>li:nth-child(4n+1) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>/* when a is negative then matching is done backwards */
li:nth-child(-n+4) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>