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

时间:2017-08-27 22:08:10

标签: html css reactjs sass react-router

我按照本教程构建了一个反应应用程序:React JS Tutorial for Beginners#1 - 使用React,Sass,Gulp和Node.js构建网站

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

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

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

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

1 个答案:

答案 0 :(得分:0)

在您发布的存储库中,问题是您尝试使用的css选择器应用margin-right优先级较低,因此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)

因此,另一个选择器具有更多Precedence,即您要用于将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/