"#someid ul li.someclass a"和"#someid ul li .someclass a"之间的区别？(注意空白)

Question

我没有很多CSS经验,但最近我发现在类选择器之前有一个空格和没有一个空格之间有区别.到目前为止,我只知道它们被解释为两个不同的东西...... CSS中有经验的人能否向我解释具体的区别是什么？这也适用于id选择器吗？

谢谢.感谢你的回答.

Answer 1

#someid ul li.someclass a 手段

作为具有类someclass的列表项的后代的锚,它们本身
是
作为具有ID的元素的后代的无序列表的后代someid.

#someid ul li .someclass a 手段

作为具有类someclass的任何元素的后代的锚,它们本身是
列表项的后代,列表项是作为 具有ID的元素的后代的
无序列表的后代.
someid

因此,<a>以下标记中的元素与第一个规则匹配,但不与第二个规则匹配:

<div id="someid">
    <ul>
        <li class="someclass">
            <a href="foo.html" />
        </li>
    </ul>
</div>

并且<a>以下标记中的元素与第二个规则匹配,但不是由第一个规则匹配:

<div id="someid">
    <ul>
        <li>
            <span class="someclass">
                <a href="foo.html" />
            </span>
        </li>
    </ul>
</div>