Question

我试图看看这是否可行。目前，我有很多声明如下：

#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(1),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(2),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(3),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(5),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(6),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(7),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(8),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(9)

我知道你可以传递像3n，＆＃34; odd＆＃34;，＆＃34;甚至＆＃34;等...但我可以传递元素ID列表吗？即

#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(1,2,5,6,7,8,9)

我想我有点一厢情愿，但我想我会问，以防我错过了规范中的任何内容。

BTW：我每次都需要选择不同的值 - 所以我不能使用分裂值。

Answer 1

使用SCSS，您可以创建要选择的元素列表，然后使用@each选择器在该列表上使用nth-of-type循环。 DEMO

$list: 1 4 5;

@each $n in $list {
  div:nth-of-type($n) {
    background: blue;
  }
}

Answer 2

您可以尝试通过以下方式模拟您的选择：

＆＃13;

MERGE INTO line_cap dst
USING (
  SELECT MIN( value ) KEEP ( DENSE_RANK FIRST ORDER BY ROWNUM ) OVER () AS first_value,
         value
  FROM   (
    SELECT regexp_substr(improv,'[^,]+', 1, level) AS value
    FROM   DUAL
    CONNECT BY regexp_substr(improv, '[^,]+', 1, level) is not null
  )
) src
ON ( src.value = dst.id )
WHEN MATCHED THEN
  UPDATE
    SET cap_up = first_value;

＆＃13;

div:nth-of-type(n) {
  background: red;
  /* initial styles */
}

div:nth-of-type(n+3) {/* The start is 3*/
  background: green;
  /* new styles */
}

div:nth-of-type(n+9) {/* The end is 9-1 = 8*/
  background: red;
  /* put back the initial styles */
}

＆＃13;

它也适用于许多时间间隔：

＆＃13;

<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>
<div>13</div>
<div>14</div>

＆＃13;

div:nth-of-type(n) {
  background: red;
}
div:nth-of-type(n+3) {
  background: green;
}
div:nth-of-type(n+5) {
  background: red;
}
div:nth-of-type(n+7) {
  background: green;
}
div:nth-of-type(n+9) {
  background: red;
}

＆＃13;

顺便说一句，我建议更好地使用LESS / SASS来解决@Nenad Vracar OR 的答案，只需考虑更好的HTML / CSS结构就可以使用Classes和ID正确。如果您只是将类附加到所需元素，则可以明显改善您的选择。

可以在CSS中一次定位nth-of-type（x）列表？

2 个答案: