你的代码 #

CSS

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

HTML

<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>

这是个典型的CSS继承特性导致的问题，我帮你拆解清楚核心原因：

1. list-style是「非继承属性」：你用#nav > li设置的list-style:none只会作用于#nav的直接子li（也就是Home、About US、Services这三个），内层ul里的孙级li不会继承这个样式，会保持默认的列表标记，这和你预期的一致。
2. letter-spacing是「继承属性」：当你给#nav的直接子li设置这个属性后，它的所有子元素（包括内层ul里的li，甚至li里的a标签）都会自动继承这个3px的字母间距，所以你才会看到孙级列表项也出现了间距。

解决办法 #

方法一：重置孙级li的letter-spacing

给内层的li单独设置默认的字母间距，覆盖继承的值：

#nav > li { 
  list-style:none; 
  letter-spacing:3px; 
}
/* 重置孙级li的字母间距为默认值 */
#nav > li ul li {
  letter-spacing: normal;
}

方法二：将letter-spacing应用到直接子li的a标签上

如果你只希望直接子li的文本有间距，把样式直接加到a标签上，这样内层的a标签不会继承这个样式：

#nav > li { 
  list-style:none; 
}
/* 仅给直接子li里的a标签设置字母间距 */
#nav > li > a {
  letter-spacing:3px; 
}

内容的提问来源于stack exchange，提问作者Neeraj Gupta