CSS дочерний селектор меня смущает

Question

CSS

#nav > li {
  list-style:none;
  letter-spacing:3px;
  }

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About US</a></li>
  <li><a href="#">Services</a>
	<ul>
		<li><a href="#">Web Development</a></li>
		<li><a href="#">Mobile Development</a></li>
		<li><a href="#">Consultancy</a></li>
	</ul>
</li>
</ul>

Я использую дочерний селектор, чтобы сделать стиль списка нет, который только отменяет стили дочерних элементов списка. Но свойство letter-spacing добавляет интервалы к элементам списка внуков. Это меня смущает.

Answer 1

#nav > li {
  list-style:none;
  letter-spacing:3px;
  ul{
    list-style:none;
    letter-spacing:0;
  }
}

или

#nav > li {
  list-style:none;
  letter-spacing:3px;
  ul{
    li{
      list-style:none;
      letter-spacing:0;
    }
  }
}

Answer 2

Поведение по умолчанию letter-spacing, text-* и font-* должно наследоваться от родителя. Итак, вы сбросили на своих детей:

#nav > li {
  list-style: none;
  letter-spacing: 3px;
}
#nav > li li {
  letter-spacing: normal;
}

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About US</a></li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Development</a></li>
      <li><a href="#">Consultancy</a></li>
    </ul>
  </li>
</ul>