CSS3 选择器，用于搜索元素 ID 中的数字

Question

我想为id中由数字标识的指定范围的元素提供一个自定义的CSS属性。

HTML:

<div id="game">
  <div id="game-board-field-1-street-name"></div>
  <div id="game-board-field-2-street-name"></div>
  <div id="game-board-field-3-street-name"></div>
  <div id="game-board-field-4-street-name"></div>
  ...
  <div id="game-board-field-11-street-name"></div>
  <div id="game-board-field-12-street-name"></div>
  <div id="game-board-field-13-street-name"></div>
  <div id="game-board-field-14-street-name"></div>
  ... too many ...
</div>

CSS：

#game div[id$=street-name] { /* I want this selector to get applied only to streets 1-4 */
  font-size: 10px;
}
#game div[id$=street-name] { /* This one to streets 11-14 */
  font-size: 14px;
}

有没有什么方法可以只通过CSS来处理它？

Answer 1

您不能直接根据编号的ID进行选择，因为CSS不提供动态属性选择器。

但是，如果您的结构使得每个编号的div对应于其在#game父元素中的位置，则您可以使用:nth-child()：

/* First 4 elements */
#game div:nth-child(-n+4) {
  font-size: 10px;
}
/* Elements starting from the 11th and ending at the 14th */
#game div:nth-child(n+11):nth-child(-n+14) {
  font-size: 10px;
}