[英]CSS Attribute Selectors Exclude
I'm trying to get my icon font to work and I need to exclude icon-blue
我正在尝试使用我的图标字体,并且需要排除
icon-blue
[class^="icon-"], [class*=" icon-"] {
font-family: 'fontname';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
How can I do this? 我怎样才能做到这一点?
First 第一
[class^="icon-"], [class*=" icon-"]
dont make sense because [class^="icon-"] is included in [class*=" icon-"] 没有道理,因为[class * =“ icon-”]中包含[class ^ =“ icon-”]
To exclude you can use: 要排除,您可以使用:
[class*="icon-"]:not(.icon-blue)
You have a full example to play here: http://codepen.io/luarmr/pen/dozjZW 您可以在此处玩一个完整的示例: http : //codepen.io/luarmr/pen/dozjZW
You can use the :not() selector like 您可以像这样使用:not()选择器
[class^="icon-"]:not([class="icon-blue"]),
[class*="icon-"]:not([class="icon-blue"]) {
font-family: 'fontname';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:not([class="icon-blue"]), [class*="icon-"]:not([class="icon-blue"]) { background: green; }
<div class="icon-red">test</div> <div class="icon-yellow">test</div> <div class="icon-blue">blue</div> <div class="small-icon-red">test</div>
Note, you can simplify your selector to just 请注意,您可以将选择器简化为
[class*="icon-"]:not([class="icon-blue"]) {
since *=
will cover the ^=
cases also. 因为
*=
还将涵盖^=
情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.