html - 导航栏边距的间距不起作用 react

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

Precendence is calculate in this way

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: 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)

因此，其他选择器的优先级高于您要用于将 margin-right 应用于 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/