two css files are conflict

Question

My CSS3 Menu Bar is conflicting with the bootstrap.min.css

If I remove the bootstrap css then menu bar looks like below

Once bootstrap menu is added then it become like below

Instead of alphabet letters such as Menu1, Menu2, I m using some images on the menu. Because of CSS conflict, menu images comes below the menu border line. I got the image like below (but I want the image should be in center)

<link rel="stylesheet" type="text/css" href="Style/css3menu1/style.css" />
<link href="Style/vTab/bootstrap.min.css" rel="stylesheet" />

I have linked the both css like above and copied those codes in jsfiddle. I could not find the conflicting part in the CSS. Can anyone please help me. jsfiddle sample is here... https://jsfiddle.net/w3jz075t/

Answer 1

包含CSS文件的顺序非常重要，它们将按此顺序加载。

如果有2行影响同一个html元素，浏览器将采用最后一行（除非您使用属性！important）。

Answer 2

您是否尝试过链接这样的css文件：

<link href="Style/vTab/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/css3menu1/style.css" />

（按相反的顺序）

所以你的css样式将在bootstrap之后应用。 在使用开发工具进行故障排除时，请关注一些css属性后的！important ！

祝你好运！

Answer 3

由于Master page＆amp ;;我无法撤消订单。内容页。最后，我总结了这个问题，并在bootstrap css中确定了冲突代码，在下面

/*
@media print
{
*
{
text-shadow:none!important;
color:#000!important;
background:transparent!important;
box-shadow:none!important
}

a,a:visited
{
text-decoration:underline
}
a[href]:after
{
content:" (" attr(href) ")"
}
*/

我真的不知道他们做了什么以及它们是如何成为问题的根本原因但如果我评论这些行，那么我的菜单栏就会正确放置。谢谢大家的支持。