导航栏边距的间距不起作用

Question

我按照本教程学习了构建 React 应用程序：React JS 初学者教程 #1 – 使用 React、Sass、Gulp 和 Node.js 构建网站

除了导航栏的间距之外，一切都很好。他调整间距的方式在：

代码：https://gist.github.com/kentonraiford/42cad2361cb6e47c7fd6b995013d50f4

我重新观看了几次视频，但无法弄清楚我在哪里搞砸了。这可能是一个简单的修复，但我似乎无法找到解决方案。

文件链接：https://github.com/kentonraiford/reactTutorial

Answer 1

在您发布的存储库中，问题在于您尝试用于应用 margin-right 的 css 选择器的优先级较低，因此 margin-right 属性被覆盖

header {
   nav ul li {
     margin: 0;
     padding: 0;
   }
}

优先级是这样计算的

元素，伪元素： d = 1 – (0,0,0,1)
类，伪类，属性： c = 1 – ( 0,0,1,0)
Id: b = 1 – (0,1,0,0)
内联样式： a = 1 – (1,0,0,0)

所以这个选择器会有这个优先级：(0, 0, 0, 4)

header {
  ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
  }
}

你用来添加margin-right的选择器有(0, 0, 0, 3)

因此，另一个选择器的优先级高于您要用于将边距右应用于 li 元素的选择器

您可以通过创建更具体的选择器（将类或 id 添加到选择器）来解决此问题，这将给予它更多优先权来覆盖其他选择器或使用 !important（不推荐的方式）

例如：

header {
  ul.header-list li {
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
  }
}

优先级：(0, 0, 1, 3)

有关优先级的更多信息：

http://vanseodesign.com/css/css-specificity-inheritance-cascaade/