Rails 超链接不受 CSS 影响答案

【问题标题】：Rails Hyperlink not affected by CSSRails 超链接不受 CSS 影响
【发布时间】：2014-06-17 01:15:24
【问题描述】：

我正在构建一个简单的 Rails 博客，并尝试用一些 CSS 来为它增添趣味。

我不能用我的任何 CSS 更改链接标题。我什至用一个 Div ID 包围它并尝试这种方式无济于事。我可能在这里遗漏了一些简单的东西，但我不知道那是什么。这是有问题的代码。

<div id="article-header"><h2><%= link_to article.title, article_path(article) %></h2></div>

这是我的 CSS 样式表

    .bit-25 {
  padding: 20px;
  text-align: center;
  border: 2px solid #999999;
  color: #606e67;
  float: right;
  display: block;
}

.bit-75 {
  padding: 20px;
  text-align: center;
  border: 2px solid #999999;
  color: #606e67;
}


.clearfooter {
  height: 330px;
  clear: both;
}


footer {
  position: relative;
  width: 100%;
  height: 330px;
  background: #3f4944;
}



html,body {
  background: #efeddf;
  height: 100%;
}


#article-header {
  color: #555;
}

#main-header {
  height: 140px;
  background: #57645d;  
  position: fixed;
  top: 0px;
  margin: auto;
  z-index: 100000;
  width: 100%;

}


#main-nav ul {
  text-align: center;
  margin-top: 120px;
  padding-top: 
}

#main-nav ul li {
  padding-left: 10px;
  display: inline-block;
  margin-right: 20px;
}

#main-nav ul li a {
  text-decoration: none;
  color: #efeddf;
}

我正在使用一个名为柠檬水的网格系统，以防有人对 .bit 类感到困惑。我是一个新手，所以虽然我喜欢它，但欢迎任何批评。:)

【问题讨论】：

将id 添加到h2 本身，而不是周围的div？并确保您的 css 包含在页面中。您也可以右键单击浏览器中的元素并选择“检查元素”（或类似的，具体取决于您的浏览器）。它将打开开发控制台。在右侧，您应该能够看到适用于您的元素的样式。
试过那个罗宾，但无济于事。不过感谢您的建议。
该框架可能会使用具有更高优先级的样式覆盖您的样式（这看起来很奇怪，但是...）。打开控制台，看看你的 h2 的样式。检查您的 h2 样式是否出现。
好的，所以我想通了。这是Ruby代码的问题。 “link_to”转换为“a”元素。 CSS 完全缺少该元素，因为我有“#article-header”而不是“#article-header a”，由于您的建议，我在“检查元素”时看到了它。感谢所有的建议和帮助大家。我总是对人们愿意在这里帮助解决任何问题的及时性感到惊喜。看来我无法在这里检查答案，因为您的似乎是评论。
我添加了一个答案。祝你好运:)

标签： css ruby-on-rails hyperlink blogs

【解决方案1】：

在这种情况下，开发控制台非常有用，它允许您检查元素及其 CSS。

右键单击一个元素，然后在 Chrome 或 Firefox 中单击“检查元素”。

在这里，您发现必须重新设置 h2 (h2 a) 中链接的颜色，而不是 h2。

【讨论】：

谢谢，肯定会更多地利用这个工具。

【解决方案2】：

您似乎在#main-nav ul 选择器中缺少padding-top 属性的值。这会将错误级联到它下面的属性。尝试在其中放置一个值或将其删除。

【讨论】：

感谢您指出这一点。没有解决我的主要问题，但我没有注意到。谢谢。

【解决方案3】：

您可能需要覆盖 a 元素的伪类：

#main-nav ul li a:link, a:active, a:hover, a:visited,  {
  text-decoration: none;
  color: #efeddf;
}

查看http://css-tricks.com/pseudo-class-selectors/。

【讨论】：

谢谢。那没有用，但很高兴了解这些选项。以后肯定会用到。