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

Question

我在 CSS 方面经验不多，但最近我发现在类选择器前有空格和没有空格是有区别的。到目前为止，我只知道它们被解释为两种不同的东西......有 CSS 经验的人可以向我解释具体的区别是什么吗？这是否也适用于 ID 选择器？

谢谢。感谢您的回答。

Answer 1

#someid ul li.someclass a意味着

Anchors that are descendants of
list items that have the class someclass and are themselves descendants of
unordered lists that are descendants of
the element with ID someid.

#someid ul li .someclass a意味着

Anchors that are descendants of
any elements that have the class someclass and are themselves descendants of
list items that are descendants of
unordered lists that are descendants of
the element with 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>