Разница между "#someid ul li. Someclass a" и "#someid ul li. Someclass a"?(обратите внимание на пробел)

Question

У меня нет большого опыта работы с CSS, но недавно я обнаружил, что есть разница между наличием пробела перед селектором класса и отсутствием его. До сих пор я знаю только, что они интерпретируются как две разные вещи ... Может кто-то опытный в CSS объясняет мне, в чем заключается конкретное различие? Это относится и к селектору идентификаторов?

Спасибо. цените ваши ответы.

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>