如何覆盖全局li的margin-top样式，实现三列目录列表紧凑布局？

问题核心原因 #

你遇到的是CSS选择器优先级/声明顺序问题，#tcnt li的理论优先级远高于全局的li选择器，没有生效通常是下面几种情况导致：

1. 你写的目录样式代码放在了全局li样式的前面，同优先级下后声明的样式会覆盖前者
2. 全局li样式额外加了!important标记，拉满了优先级
3. 你写错了选择器拼写、或者目录的DOM结构和你预期的不一致

可行解决方案 #

按优先级从低到高选择即可：

• 调整样式声明顺序
  把你写的目录相关样式放到全局li {margin-top:8px}的后面，无需修改选择器，#tcnt li {margin-top:0}就能正常生效。
• 提高选择器特异性
  如果调整顺序没用，组合父元素选择器提高优先级，还可以直接覆盖所有边距避免其他冗余样式影响：

/* 组合父标签+id+类，优先级足够覆盖几乎所有普通全局样式 */
nav ul#tcnt.newsp li {
  margin: 0;
}

• 加!important兜底
  如果排查后发现全局li加了!important，直接给目录样式也加!important即可：

#tcnt li {
  margin-top: 0 !important;
}

快速排查方法 #

打开浏览器开发者工具（F12），选中目录内任意一个li元素，查看「样式」面板里的margin-top属性，就能直接看到是哪个选择器的样式覆盖了你的设置，针对性调整即可。

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