CSS:span.test还是.test？

Question

有什么区别:

#example .test{margin-top:10px}

和

#example span.test{margin-top:10px}

.test是完全独特的,没有任何具有该名称的类存在.我一直在努力使用

<div id="example">
    <label for="name">Name</label>
    <input name="name" type="text" />
    <span class="test">asdfghjkl</span>
</div>

第一个css不起作用,而第二个css工作正常.只是想知道为什么第一个不会工作？谢谢

编辑:我发现在输入字段(在上面的例子中),我已经放float:left;,这导致了问题.如果有人有兴趣,这里你可以看到例子.如果你删除 float:left;,它将正常工作. http://jsfiddle.net/CmXrX/1/

Answer 1

是,有一点不同.这种差异具有特殊性.如果您有相互冲突的CSS规则 - 两个规则指向同一个元素但某些属性发生冲突 - 冲突将通过有关特异性的规则进行整理.

每种类型的选择器都有一定数量的"特异性点"例如:

Selector type          Points
-----------------------------
HTML selector          1
class selector         10
id selector            100

所以,如果你有这两个规则:

#example .test{margin-top:10px}
#example span.test{margin-top:20px}

上边距为20px,因为第二个规则的特异性为111(100 + 10 + 1),而第一个规则具有110(100 + 10).

因此,我的猜测是,你有一个具有111特异性的冲突风格.