Favicon 上的 CSS - Rails答案

【问题标题】：CSS on Favicon - RailsFavicon 上的 CSS - Rails
【发布时间】：2015-11-21 08:04:30
【问题描述】：

我有一个带有引导程序的 rails 4 应用程序。

我的页眉中有一个徽标图片，它链接回根路径。

我正在尝试修复 CSS，以便当您将鼠标悬停在徽标上时，它不会在徽标的一部分后面出现黑色实心框。

我想要始终透明的背景。没有悬停样式，也没有访问样式。

 <div class="row">
                <div class="col-md-4" style=" a:hover {text-decoration:none;background-color:transparent;}; a:visited {text-decoration:none;background-color:transparent;};
;
">
                  <%= link_to image_tag("favicon.ico", size: "25" ), root_path  %> 
                 </div>

我试图阻止这种样式，但找不到强制黑匣子的原因。

另一个尝试：

我尝试从 html 中删除样式属性并将它们放入单独的 div 标签中：

我现在有一个名为 nav logo 的 div 类，并将对样式的引用替换为：

<div class="col-md-4" class="navlogo">
                  <%= link_to image_tag("favicon.ico", size: "25" ), root_path  %> 
                 </div>

div 标签有：

.navlogo {
     a:link {text-decoration:none; background-color:transparent; color:none};
    a:visited {text-decoration:none;background-color:transparent; color:none};
    a:hover {text-decoration:none;background-color:transparent; color:none};
    a:active {text-decoration:none;background-color:transparent; color:none};
}

黑匣子还在。我该如何摆脱它？

【问题讨论】：

您为什么使用 .ico 图片？ favicon 仅位于页面标题（选项卡）旁边...
我不想加载图片两次

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

您不能在样式属性中指定整个样式表并期望它受到任何匹配的后代的尊重。 style 属性仅用于指定其所属节点的内联 css 规则。

所以你的 style 属性没有任何作用。您可能希望在样式标签内移动 css。

如果这不能解决问题，请考虑创建一个 jsfiddle，以便重现问题。

【讨论】：

我不知道“匹配后代”是什么意思。那是我在 html 中使用这些属性和那个图标的唯一地方。我也不知道节点是什么，或者“节点”属于什么。我也不知道样式标签是什么。你是说 div 标签吗？
当我明确提到样式标签时，我当然不是指 div 标签：developer.mozilla.org/en/docs/Web/HTML/Element/style
请选择一本关于 HTML 基础知识的好书或在线课程。还可以考虑在提问之前至少花一些基本的精力在谷歌上搜索答案。
实际上 - 在提问之前，我阅读了所有从 css 和 html 开始的课程资料。在回复您的评论之前，我搜索了您使用的每个技术术语。我问是因为我无法解释你的行话来找到意义。或许您应该注意，有不同技能水平的人尝试使用此板。
另外，在我项目的其他方面，我经常使用我在上面的问题中提出的样式来修改我的 div 标签中的 css。如果其他人正在阅读此板并且对您的声明感到困惑，则上述方法确实可以引入 css 样式以修改或添加到 div 标签中的样式。我不知道为什么它在我上面的帖子中不起作用。

【解决方案2】：

当您将其拆分为单独的 div 标签并在单独的 div 类中使用样式时，它似乎可以工作。

<div class="col-md-4"> <div class="navlogo2">
                  <%= link_to image_tag("favicon.ico", size: "25" ), root_path  %> 
                 </div></div>

【讨论】：