当前位置: 首页 > 面试题库 >

选择CSS中的每N个元素

林泰平
2023-03-14
问题内容

例如,是否可以选择一组元素中的每个第四个元素?

例如:我有16个<div>元素…我可以写类似的东西。

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

有一个更好的方法吗?


问题答案:

顾名思义,它允许您使用除常数以外的变量构造算术表达式。您可以执行加法(),减法()和系数乘法(其中是整数,包括正数,负数和零)。:**n** th-child()``n``+``-``an``a

这是重写上面的选择器列表的方法:

div:nth-child(4n)

有关这些算术表达式如何工作的解释,请参见我对该问题的回答以及规范。

请注意,此答案假设同一父元素内的所有子元素都具有相同的元素类型div。如果您还有其他不同类型的元素,例如h1p,则需要使用: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
...

如您所见,两个选择器将与上述相同的元素匹配,没有区别。



 类似资料:
  • 我试着练习用CSS选择器获取值,我想出了这个(不像预期的那样工作) (我也尝试过) 我对的期望:第三个没有id属性和data-ad-show属性的元素被选中,其值将是所需的值3。

  • 问题内容: 以下是我的HTML页面的摘要: 在这里我想选择id =’platinum’的第三个td元素 我试过的是。 和 两者对于如何选择第三个td都不起作用 问题答案: 有一个没有ID 的空值,这会干扰计数。选择器的意思是“第n个元素”,而不是“第n个元素”。因此,具有该ID 的第三个实际上是整个行中的第四个。 使用CSS选择器无法选择具有特定ID 的第三个元素。您应该改用XPath:

  • 问题内容: 如何调整以下CSS选择器: 所以它适用于TD列2-4? 问题答案: 您将无法一次完成此操作-您将需要链接至少一个其他此类伪类。例如,的组合和(该位装置开始从第二子分别计数向前和向后): 或者,不使用公式,只需排除和:

  • 问题内容: 我有一个具有名称,值,时间列的Oracle表。基本上,该表用于记录目的,用于存储对特定名称所做的更改,以前的值是什么以及更改时间。 我需要制定一个查询来获取特定名称的前n个更改,并且输出应具有表中的所有名称。任何帮助/建议吗? 编辑: 我需要选择11月1日,10月31日,8月31日和Ravi的Harish的详细信息。 问题答案: 这是你所追求的吗? 我的测试设置: 这是查询:

  • 问题内容: 我正在使用以下SQL语句: 但是每次表获得新行时,查询结果都会不同。 我想念什么吗? 问题答案: 假设这是唯一的,并且新行总是具有更大的(以后)。 经过一番评论: 我 认为 您需要: 请注意 。这样,您就跳过每一秒每一个和附加(后下)行不改变选择为止。 另外,只要您为 _ 单个_ ()选择行,就将谓词拉入子查询,即可达到相同的效果(单个用户的稳定选择)。两者都不需要。 该子查询中的条款

  • 问题描述 这道题是 LeetCode 77 题。 给定两个整数 n 和 k,返回 1 … n 中所有可能的 k 个数的组合。 解法一:回溯法 递归 k 层。每层选取一个数,然后递归地选取 k-1 个数,直到选够 k 个数为止。设每层的数字区间为 [start, end],则这一层可以选择 [start, end-(k-1)] 的任何一个数 i,只要给下一层留出 k-1 个数即可。下一层的数字区间为