See below screen grab, I want to make the .navbar-account > li > a as the active one. But by default it's disabled and active one is .navbar-default .navbar-nav>li>a. Due to this my font color doesn't change as red. I cannot put !important as it affects another page. So somehow I want to enable the .navbar-account > li > a in the slid-in-menu.css.
In this case, the selector that is present within the bootstrap.min.css file has more specificity than the one that is present in slide-in-menu.css and hence that one wins.
Specificity is a very important thing because we can always have the same element being targeted by multiple selectors (like in this case) and during such times, the User Agents use the specificity of the selectors to determine which one would eventually win and get applied to the element.
As per W3C Specs:
A selector's specificity is calculated as follows:
- count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
For the selector .navbar-default .navbar-nav>li>a, the specificity is 022 because it has two class selectors and two element type (li, a) selectors as part of it.
Whereas the selector .navbar-account > li > a has a specificity of only 021 because it only has 1 class selector and two element type selectors as part of it.
So, the key to overriding the properties specified within the bootstrap selector is to use a selector that is more specific than the bootstrap one. If we change the selector to body .navbar-default .navbar-account > li a, the selector's specificity becomes 023 (higher than bootstrap selector) because now it has 2 class selectors and 3 element type selectors and so it wins.
Changing the selector this way would not cause any other problems elsewhere also because body is always the parent for all elements and .navbar-default is the parent for .navbar-account.
Note: We could just use .navbar-default .navbar-account > li a (without the body) also but its specificity is 022, which is the same as the bootstrap selector and hence there is no guarantee that it will always get applied. (This was written before I saw this comment of yours. If the slide-in-menu.css is always loaded after bootstrap.min.css then this alone would also suffice.)
Also, as I had mentioned in my comment to Scott Marcus' answer, if you want the bootstrap styles to be overridden only for one page then his answer has the best approach. The approach mentioned in my answer will override in all pages.
