CSS选择器以匹配数字大于的类

Question

我有一个使用 Sencha Touch 2 开发的移动混合应用程序，它需要根据其运行的 iOS 版本进行一些自定义。

我的 Sass 样式表中曾经有以下选择器:

.x-ios-7 {
/* put here iOS7 customizations */

}

现在在 iOS8 中，框架添加了一个 x-ios-8 类而不是 x-ios-7 并且自定义显然被破坏了。

有没有办法用 x-ios-{i} 选择所有类，其中 {i} >= 7？

[编辑]

允许使用 Sass。 我不想对已知案例进行硬编码。

Answer 1

SASS

@for $i from 3 through 6 {
    .x-ios-#{$i} { background:blue; }
}

产生

.x-ios-3 { background:blue; }
.x-ios-4 { background:blue; }
.x-ios-5 { background:blue; }
.x-ios-6 { background:blue; }

常规 CSS

div { width:100px;height:100px;border:1px solid black;float:left; }
[class^="x-ios-"]:not([class*="1"]):not([class*="2"]) { background:blue; }

<div class="x-ios-1"></div>
<div class="x-ios-2"></div>
<div class="x-ios-3"></div>
<div class="x-ios-4"></div>
<div class="x-ios-5"></div>
<div class="x-ios-6"></div>

---

或者为您的用例想出第 n 个秘诀..

:nth-child(n+5) matches children 5, 6, 7, ...
:nth-child(2n+5) matches children 5, 7, 9, ...
:nth-child(-n+7) matches children 1, 2, 3, 4, 5, 6, 7
:nth-child(-3n+8) matches children 2, 5, and 8