这意味着如何使用CSS类：.class1.class2？

我一直在使用Zurb Foundation Framework 这意味着如何使用CSS类：.class1.class2？

在他们的CSS文件，我看到的东西我还没有见过：

.blue.button:hover, .blue.button:focus { 
background-color: #0192DD; 
} 
.nice.blue.button { 
border: 1px solid #0593DC; 
} 
.button:hover, .button:focus { 
background-color: #0192DD; 
color: white; 
} 
.blue.button { 
background-color: #00A6FC; 
}

举例来说，我非常清楚地知道什么.blue .button做，但我不知道是什么.blue.button呢。任何人都可以向我解释这个吗？

来源

2012-03-07 alexchenco

另请参见：http://www.w3.org/TR/CSS2/selector.html#class-html – 2012-03-07 13:10:19

意味着包含所有这些类的元素（例如<button class="blue button>）。

来源

2012-03-07 13:09:27

只有具有这两个类的元素：'蓝色按钮'？所以只有'blue'类或只有''button'类的元素不适用？ – alexchenco 2012-03-07 13:10:58

正确。我应该强调**全部**这个词。要提供替代方法，可以用逗号分隔它们：'.blue，.button' - ** **“blue”**或**“button”**或**两者同时出现。 – 2012-03-07 13:12:08

.blue.button适用于具有一个元素都类blue和button，
像<p class="blue button">。

来源

2012-03-07 13:10:04 deceze

这意味着这种风格只适用于两个类都在元素上的情况。

<a href="#" class="blue button">Link</a> // will work 
<a href="#" class="button">Link</a> // will not work 
<a href="#" class="blue">Link</a> // will not work

来源

2012-03-07 13:10:10 Samich

是的。基本上这个规则只适用于具有两个类的元素。

当您有.class1, .class2时，该规则适用于具有class1的元素和具有class2的元素。 .class1.class2表示它仅适用于具有class="class1 class2"的元素。 .class1 .class2表示它适用于具有class2的元素，该元素用class1任意嵌套在元素内。

对于进一步阅读：Class selectors in CSS2 specification

来源

2012-03-07 13:10:44

不，'.class1 .class2'表示它适用于'class1'元素中'class2'元素。 – deceze 2012-03-07 13:11:42

当然你是对的。 – 2012-03-07 13:13:14

<div class="item"></div> 
<div class="item selected"></div> 
<div class="notitem selected"></div>

然后，您可以让所有的物品红色 .item（颜色：红色）

但只有选择的项目红/加粗 .item.selected {字体 - 重量：大胆}

而没有做任何其他事情选择...

希望这是有道理

来源

2012-03-07 13:12:59 Steen

这意味着如何使用CSS类：.class1.class2？

回答

相关问题