2012-07-26 49 views
0

我刚刚发现了使用网格的Skeleton样板。这是在GitHub上的CSS:https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.cssCSS语法:“.one.column”“.two.column”,我正在阅读这个权利吗?

不同的列类奠定了.one.columns.two.columns

我从来没见过这种语法在CSS。

我是正确的假设,.one.columns {}不同于.one, .columns {}在于前者仅影响元素与class="one columns"而后者影响与class="one"class="columns"这两个元素?

即:

.one.columns = .one AND .columns 
.one, .columns = .one OR .columns 

回答

4

.class1.class2 {}均为类别class1class2的所有元素。

.class1 .class2 {}指类class2的所有元素,它们是类class1的元素的后代。

.class1, .class2 {}指所有具有class1和/或class2类别的元素。

2

你是正确的。

将它们链接在一起而没有空白符合所有存在的类。

它们之间的逗号表示选择任何匹配逗号分隔选择符的元素。

2

当CSS选择器连接在一起时,它们都必须应用于要选择的元素。就像div.foo意味着元素是div并且也具有类foo,.one.columns意味着具有类one并且也具有类columns的元素。

当CSS选择符之间用逗号分隔时,表示样式适用于与第一个选择器匹配的任何元素,以及与第二个选择器匹配的任何元素。正如h1, h2表示这些样式适用于h1元素,也可以是h2元素,.one, .columns表示这些样式适用于所有具有one类别的元素,也适用于所有类型为columns的元素。