【问题标题】:spacing for nav bar margins aren't working react导航栏边距的间距不起作用
【发布时间】:2018-02-05 04:16:54
【问题描述】:

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

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

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

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

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

【问题讨论】:

标签: html css reactjs sass react-router


【解决方案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/

【讨论】: