2015-10-12 26 views
0

我在ASP.NET MVC应用程序中使用重新启动引导模板,并在子样式表中应用了一堆CSS覆盖。出于某种原因,并非所有替代项都在我的Chrome浏览器中生效,但我认为选择器的命名都是正确的。我也在链接到HTML标记中的父页面之后,将链接放到子样式表中,以确保它按正确的顺序加载。自定义CSS覆盖不会在ASP.NET MVC中生效

下面是一个例子,其中,在我只改变单个元件的背景色:

#social_media_wrapper { 
    background: #428bca; 
} 

儿童造型在site.css片:因为它出现在style.css

父造型

#social_media_wrapper { 
    background: #ff8000; 
} 

以下是元素的HTML参考:

  <div id="social_media_wrapper"> 
       <a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square"></i></a> 
       <a href="http://stackoverflow.com"></i></a> 
       <a href="https://github.com" target="_blank"><i class="fa fa-github-square" target="_blank"></i></a> 
      </div> 

不知道还有什么会在这里缺少会导致这些孩子花式通过浏览器忽略,因为没有什么父的造型标注!important会妨碍孩子的造型从覆盖(特别是因为其他孩子风格住在同一份文件中的父母毫无问题地凌驾父母身上)。

+1

您是否曾尝试通过在子样式表中添加'!important'来进行调试?这[jsfiddle](https://jsfiddle.net/tc0q5t7r/2/)证明浏览器会优先考虑顺序加载的两个选择器中的第二个 –

+1

感谢@ToniLeigh提供调试建议。发现我错过了文档顶部的选择器的结束大括号,这是Visual Studio没有捕获到的(但显然是Chrome)。 – Kanapolis

+0

不错,打算建议铬检查员,这是非常好的! –

回答

-1

变化

#social_media_wrapper { 
    background: #ff8000; 
} 

#social_media_wrapper { 
    background-color: #ff8000; 
} 
+0

这应该没有什么区别,这个建议背后的推理是什么? –

0

变化:

#social_media_wrapper { 
    background-color: #ff8000 !important; 
} 

我希望这可以帮助。