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不能工作，而第二个可以正常工作。只是想知道为什么first不起作用？谢谢

编辑:我发现在输入字段中(在上面的例子中)，我放入了float:left;，这是导致问题的原因。如果有人感兴趣，可以在这里查看示例。如果您删除float:left;，它将正常工作。http://jsfiddle.net/CmXrX/1/

Answer 1

我发现在输入字段中(在上面的例子中)，我放入了float:left;，这就是导致问题的原因。如果有人感兴趣，可以在这里查看示例。如果您删除float:left;，它将正常工作。http://jsfiddle.net/CmXrX/1/

Answer 2

是的，这是有区别的。这种区别在于特异性。如果您有冲突的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的特异性。

Answer 3

有两点不同：

1. 仅当test类应用于span而不是其他元素时，后者才适用。
2. (在您的情况下可能更相关)后者的specificity比前者高。

您可能有一个比第一个选择器具有更高特异性但低于第二个选择器的其他规则。这意味着另一个规则将覆盖第一个规则，但不会覆盖第二个规则。