29

如果它有一个类并且该类是'foobar',我只想选择元素。

<style>
.foobar {
    /* only apply to an element if the element has a class and the only class is 'foobar'. */
    background: black;
    color: white;
}
</style>

<div class="foobar">i should be selected</div>

<div class="foobar ipsum">i should not be selected</div>

我知道我可以通过为 .foobar.ipsum { do one thing } 和 .foobar { something else } 添加样式来选择它,但我无法控制其他类。基本上当元素只有 foobar 类时,我知道它是我的元素并且来自其他地方。这就是 CSS 库世界发生碰撞时发生的情况。我知道这里有更深层次的问题需要解决,但这现在让我很困惑。

4

3 回答 3

53

使用纯 CSS 最简单的方法是使用属性选择器:

[class="foobar"] {
    /* only apply to an element if the element has a class and the only class is 'foobar'. */
    background: black;
    color: white;
}

您可能无法控制其他元素,但如果您可以控制自己的元素并且可以修改其class属性,那么 mayabelle 提出了一个很好的观点,即为您的元素分配自己的特殊类并改为由该类选择。这样,您就可以明确说明哪个元素是您的,而不是假设没有其他类就意味着它是您的。

于 2013-10-23T16:23:54.610 回答
7

您将需要使用属性选择器

[class="foobar"] {
    background: black;
}

http://jsfiddle.net/dA2dp/

于 2013-10-23T16:24:05.847 回答
3

如果它是“你的元素”,你可以应用一个额外的类吗?然后你可以选择使用它:

<style>
.foobar.yourClass {
    /* your css */
}
</style>

<div class="foobar yourClass">i should be selected</div>
<div class="foobar ipsum">i should not be selected</div>
于 2013-10-23T16:24:32.467 回答