“#someid ul li.someclass a”和“#someid ul li .someclass a”之间的区别？ （注意空白）

Question

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

感谢。感谢你的回答。

Answer 1

#someid ul li.someclass a表示

  

作为后代的锚点   列出具有班级someclass 的项目，并且这些项目本身就是其后代   作为后代的无序列表   标识为someid的元素。

#someid ul li .someclass a表示

  

作为后代的锚点   具有类someclass 的任何元素，并且它们本身就是其后代   列出作为后代的项目   作为后代的无序列表   标识为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>

Answer 2

两个例子：

#someid ul li.someclass a会点击此示例中的锚标记

<div id="someid">
  <ul>
    <li class="someclass">
      <a href="http://www.example.com">link</a>
    </li>
  </ul>
</div>

#someid ul li .someclass a会点击此示例中的锚标记

<div id="someid">
  <ul>
    <li>
      <div class="someclass">
        <a href="http://www.example.com">link</a>
      </div>
    </li>
  </ul>
</div>

另请注意，这会触及两者：

<div id="someid">
  <ul>
    <li class="someclass">
      <div class="someclass">
        <a href="http://www.example.com">link</a>
      </div>
    </li>
  </ul>
</div>