When do you separate style classes with a space? So for example: what is the difference between the following two blocks of css?
您何时将样式类与空间分开?例如:以下两个css块之间的区别是什么?
Block 1:
块1:
div {
color: brown;
}
div.special {
font-size: 18px;
}
Block 2:
第二块:
div {
color: brown;
}
div .special {
font-size: 18px;
}
This is the HTML:
这是HTML:
The quick brown fox jumps over the lazy dog.
I tried both versions. Only with block 1 the text wil be in font size 18.
我试着两个版本。只有第1块文本的字体大小为18。
5 个解决方案
#1
36
You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes.
For example, to refer to a div with two classes, e.g.
you could use:
例如，要引用具有两个类的div，例如
，您可以使用:
div.foo.bar {...}
To refer to the child span element
stuff
you could use:
参照子span元素
素材
你可以使用:
div.foo .bar {...}
#2
21
A space indicates nesting:
空间显示嵌套:
div .foo /* .foo is inside div */
No space indicates further specificity:
没有空间表示进一步的特异性:
div.foo /* any div that is also .foo */
#3
5
div.special refers to
div.special指
<- this
div .special refers to
div。指
<- this
Not neccassily a p BTW
当然不能
#4
2
The space notes that this is a child item.
空间注意到这是一个子条目。
IE
即
div.special
targets a div that has the class special while
目标一个有特殊的类的div。
div .special
targets an element with class special inside a div element
针对div元素中具有特殊类的元素
#5
1
div.special will select the div element which has class .special and it wont select any other element with class .special so if you have something like
will be excluded, where as this div .special will select all the elements having class .special which are nested inside div so this will select
so it concludes that the 1st one is stricter than the second one
京公网安备 11010802041100号