CSS 选择器匹配数字大于的类 [英] CSS selector to match class with number greater than
问题描述
我有一个使用 Sencha Touch 2 开发的移动混合应用程序,需要根据运行的 iOS 版本进行一些自定义.
I have a mobile hybrid application developed with Sencha Touch 2 which needs some customization based on the iOS version it is running on.
我曾经在我的 Sass 样式表中有以下选择器:
I used to have the following selector in my Sass stylesheet:
.x-ios-7 {
/* put here iOS7 customizations */
}
现在在 iOS8 中,框架添加了一个 x-ios-8
类而不是 x-ios-7
并且自定义显然被破坏了.
Now with iOS8 the framework adds a x-ios-8
class instead of x-ios-7
and the customizations are obviously broken.
有没有办法用 x-ios-{i}
其中 {i}
>= 7 选择所有类?
Is there a way to select all classes with x-ios-{i}
where {i}
>= 7?
允许使用 Sass.我不想对已知案例进行硬编码.
Sass usage is allowed. I don't want to hardcode known cases.
推荐答案
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 个配方..
Or come up with a nth recipe for whatever your use case is..
: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
这篇关于CSS 选择器匹配数字大于的类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!