【问题标题】:Css - targeting certain classes [duplicate]Css - 针对某些类[重复]
【发布时间】:2012-02-18 18:08:25
【问题描述】:

可能重复:
CSS Selector that applies to elements with two classes

我有以下内容:

<div class="green-arrow current-plan span4">
     <img src="/images/assets/green-arrow.jpg">
</div>

<div class="green-arrow plan-above span4">
     <img src="/images/assets/green-arrow.jpg">
</div>

我想定位plan-above,所以它是display: none; 不影响plan-above(不是green-arrow)的其他实例

【问题讨论】:

  • 这个之前问过,搜索“css多类”
  • 如果你分配一些 id 真的很容易
  • @stian.net:ID 在这里有什么用途?

标签: css css-selectors


【解决方案1】:
div.green-arrow.plan-above {
    display: none;
}

【讨论】:

  • 注意:在 IE6 中严重损坏。
  • @Quentin 说一些在 IE6 中没有被破坏的东西。 ;) 但说真的,IE6 已被弃用且不再受支持,因此我认为没有理由(如果没有特别要求)在您的代码中支持该浏览器。
  • @Filip — 仍然有足够多的人支持它,当示例代码无法在其中运行时,值得一提。在自己的代码中,可以决定不支持 IE6。另一方面,在教学时,它会稍微复杂一些。
【解决方案2】:

试试这个:

div.green-arrow.plan-above {
    display: none;
}

您还可以使用 CSS3 排除几个以逗号分隔的类

div.plan-above:not(.class, #id) {
  //mark up
}

【讨论】:

  • 还是错了,:not() 在 CSS3 中不允许允许逗号分隔的类。
  • 没有这样的规范,但它在FF3中有效。自己试试
  • 你为什么使用 Firefox 3? Firefox 9 是当前的稳定版本。
  • 它只适用于 Firefox 3,因为它是一个错误。它已在我相信版本 3.1 或 3.5 中修复。
  • 我以前看过那篇文章,但它真的很老了。我刚刚left a comment on it 来解决这个误解,尽管我怀疑是否有人再读过一篇旧文章的 cmets。
猜你喜欢
  • 2018-02-17
  • 2017-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-14
  • 1970-01-01
  • 2015-02-13
相关资源
最近更新 更多