CSS 属性选择器排除
CSS Attribute Selectors Exclude
我正在尝试让我的图标字体正常工作,我需要排除 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;
}
我该怎么做?
您可以像
一样使用: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>
请注意,您可以将选择器简化为
[class*="icon-"]:not([class="icon-blue"]) {
因为 *=
也将涵盖 ^=
个案例。
第一个
[class^="icon-"], [class*=" icon-"]
没有意义,因为 [class^="icon-"] 包含在 [class*=" icon-"]
中
要排除您可以使用:
[class*="icon-"]:not(.icon-blue)
您可以在此处播放完整示例:
http://codepen.io/luarmr/pen/dozjZW
我正在尝试让我的图标字体正常工作,我需要排除 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;
}
我该怎么做?
您可以像
一样使用: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>
请注意,您可以将选择器简化为
[class*="icon-"]:not([class="icon-blue"]) {
因为 *=
也将涵盖 ^=
个案例。
第一个
[class^="icon-"], [class*=" icon-"]
没有意义,因为 [class^="icon-"] 包含在 [class*=" icon-"]
中要排除您可以使用:
[class*="icon-"]:not(.icon-blue)
您可以在此处播放完整示例: http://codepen.io/luarmr/pen/dozjZW