【问题标题】:CSS Attribute Selectors ExcludeCSS 属性选择器排除
【发布时间】:2015-06-16 17:39:29
【问题描述】:

我正在尝试让我的图标字体正常工作,我需要排除 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;
}

我该怎么做?

【问题讨论】:

    标签: css web frontend


    【解决方案1】:

    第一

    [class^="icon-"], [class*=" icon-"]
    

    没有意义,因为 [class^="icon-"] 包含在 [class*=" icon-"] 中

    要排除,您可以使用:

    [class*="icon-"]:not(.icon-blue)
    

    你有一个完整的例子可以在这里玩: http://codepen.io/luarmr/pen/dozjZW

    【讨论】:

      【解决方案2】:

      您可以使用: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"]) {
      

      因为*= 也将涵盖^= 案例。

      【讨论】:

      • 看起来:not([class="icon-blue"]) 接管并且[class^="icon-"], [class*=" icon-"] 不再起作用
      • @SteveJones,对不起,请用示例查看我的正确答案
      • @SteveJones,还是不行吗?让我知道,以便我可以提供帮助
      • 谢谢你,但还是不行,这样做:[class*="icon-"]:not(.icon-blue)
      猜你喜欢
      • 1970-01-01
      • 2016-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-19
      • 2018-06-05
      • 2011-10-17
      • 2013-06-10
      相关资源
      最近更新 更多