用于匹配具有大于的数字的类的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}＆gt; = 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

Answer 2

在vanilla CSS中，您可以使用带有通配符的属性选择器来匹配任何以＆＃34; x-ios开头的className - ＆＃34;：

[class*='x-ios-'] {
  /* all ios */
}

然后硬编码需要额外内容的已知案例：

.x-ios-7 {
  /* ios 7 */
}

修改：正如医生的回答建议你可以像这样定位＆gt; = ios7（fiddle）：

[class*='x-ios-']:not(.x-ios-3):not(.x-ios-4):not(.x-ios-5):not(.x-ios-6) {
   /* ios >= 7 */
}