So I encountered an interesting issue on my website. There are two CSS files - main.css and bootstrap.css, with some overlapping styles. I made a change in the bootstrap.css file by adding !important next to the property. Surprisingly, in Firefox, the change was applied correctly with the !important rule, while in Chrome, the style from main.css without !important took precedence.
In main.css :
.navbar-inverse .navbar-nav > li > a {
color: white;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #222222;
}
In bootstrap.css :
.navbar-inverse .navbar-nav > li > a {
color: #2b3062 !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: white !important;
background-color: transparent;
}
I'm puzzled by this behavior, any ideas on why it's happening?