Question

在制作一个相对基本的Rails应用程序之后，我尝试添加一些样式。我有两个控制器：“欢迎”和“内容”。我想将“欢迎”橙色和“内容”红色链接。

我首先将以下（以及其他一些样式）样式添加到/app/assets/stylesheets/application.css

a{
  display:inline-block;
  line-height:20px;
  padding:2px 10px;
  color:white;
  text-decoration: none;
}

随后，我将以下内容添加到/app/assets/stylesheets/content.scss：

a{
  background-color:red;
}

当然以下是/app/assets/stylesheets/welcome.scss：

a{
  background-color:orange;
}

除了“内容”中的链接框是橙色而不是红色外，所有样式似乎都正确显示！如果我将颜色从橙色更改为其他颜色，“内容”链接颜色也将更改为该颜色。

为什么我的应用中的“内容”部分没有加载正确的样式？这是一个特殊问题吗？

我在这里搜索过，我发现大多数人都有缓存样式的问题，但这不是我的问题，因为我可以改变“欢迎”风格，并对其进行另一项更改。它只是从错误的位置加载......

Answer 1

首先，我会进入您的开发工具并查看您的资产来源，并确保将该文件编译到您的CSS文件中。

如果是，那么我会在您的浏览器中使用您的检查工具（我使用chrome dev工具）来检查您尝试定位和查看的元素。通常，Chrome会向我显示正在应用于目标的样式，以及实际计算的样式。有时候，你会有被接管的风格。

对我而言，这听起来就像你将这两种风格应用于链接盒一样。除非你的a元素位于页面上不同元素的上方，否则我认为welcome.scss文件是在你的content.scss文件之后编译的，而css的工作方式是你有两种不同的样式影响一个元素，后面的元素实际上是计算的元素。

听起来，你需要更加具体的选择器。通常我所做的是在顶部div处添加一个视图名称正确的类。所以......欢迎页面顶部就是这样的东西。这样你就能做到这样：

.content a{ 
  background-color: red;
}

它仅适用于内容部分中的元素。

使用CSS，您必须非常谨慎地确定您要定位的网页上的哪些元素。否则，你最终会得到满满的风格。