我按照本教程构建了一个反应应用程序:React JS Tutorial for Beginners#1 - 使用React,Sass,Gulp和Node.js构建网站
除导航栏的间距外,一切都很好用。他调整间距的方式是:
代码:https://gist.github.com/kentonraiford/42cad2361cb6e47c7fd6b995013d50f4
我重复了几次视频,却无法弄清楚我搞砸了哪里。这可能是一个简单的修复,但我似乎无法找到解决方案。
答案 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/