I found the issue. There is a @media selector above that covered the style I was trying to override. Therefore, I suppose that means that @media has a very high value, though I’m not exactly sure where it would fall into this hierarchy. Perhaps that information could be added to this article?

.col-lg-4 {
        width: 33.33333333333333%;
    }

I wanted to give it rounded corners with a border (no problem) and give it a little room between columns so the borders don’t touch. I created this code, which to me seems to have a specificity of 0,0,2,0:

.col-lg-4.rounded {
        margin-right:0.5%;
        width: 32.83333333333333;
    }

According to Firebug, both selectors are considered, but the non-.rounded loses to the regular one. So, I tried creating the inverse, which to me seems to also have a specificity of 0,0,2,0:

.col-lg-4:not(.rounded) {
        width: 33.33333333333333%;
    }

Sure enough, it beats out the plain one, apparently because it has more specificity.
I also tried changing around the order of the selectors, inline vs. included, and the order the classes are listed (.rounded.col-lg-4), and nothing made a difference. I did my testing in Chrome.

So it makes me wonder why two classes on the same element along with a selector that targets both, not have higher specificity than a selector targeting only one? Or maybe my math is just wrong?

!important applies to the element it is assigned to, not child elements. I believe <a> is considered a child of <p> in this case. Any text within the parent element would be red regardless of what styles were applied to the universal p selecter; However <a> would retain it’s specified styles.

I’m aware this post is old, but wanted to add useful information encase someone else read this comment in the future.

http://www.w3.org/TR/CSS2/cascade.html

6.4.2 !important rules

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet (see cascade rule 3).

<style>
    .foo{ color:red!important;}
    a {color:green;}
</style>

<p class="foo">
       <a href="#">Foo</a> Bar
</p>

The color of “Foo” text in “a” will be green but most people might think it is red.

You reminded me that the universal selector has no specificity :)

I also use a different system when I want to share a specificity whit another developer.

I’m concerned about people finding this article. When I first stumbled on to the issue several years ago, I had no idea it was called “specificity.” I was simply trying to find out why styles attached to an id were overriding styles defined by class on an element contained within the id’ed element!

It would be very interesting to learn what people searched for when they were trying to get past this and then make sure the article was responsive to such searches.

Another thing is to always put elements (e.g. “p, a, h1”) and generic classes (e.g. “last”) before the other rules, it’s easier to understand what will be overwritten..