这些用css定位的课程有什么不同？

Question

假设我想定位span类元素：

如果我这样做，它没有任何效果：

ul#sponsors li span .spanelement {
}

但如果我喜欢这样：

ul#sponsors li span.spanelement {
}

它正在运作。这里的区别是什么？

Answer 1

这一个：

ul#sponsors li span .spanelement { }

匹配任何带有class="spanelement"的元素，但它必须位于跨度内（位于ul内的li里面，id =“sponsors”）。

这一个：

ul#sponsors li span.spanelement { }

匹配<span class="spanelement">本身（前提是它在ul里面的li里面，id =“sponsors”）。

Answer 2

第一个在spanelement s中选择一个类span的元素，第二个选择span个类spanelement

所以第一个匹配<p>，而第二个匹配范围本身：

<ul id="sponsors"><li><span class="spanelement"><p class="spanelement">SOMETHING</p></span></li>/<ul>

如果跨度内没有任何内容，或者里面的元素没有类spanelement，则第一个查询将不匹配任何内容

Answer 3

你的第二个例子在span和spanelement之间没有空格。 这个CSS Selector语句的目标是与类“spanelement”。

示例：

<span class="spanelement">

添加空格会更改选择器，以便选择spanelement类 INSIDE 范围内的所有标记。

示例：

<span>
<spanelement\>
</span>