css类不应用样式，但id正在应用样式？

Question

I have my HTML set up as follows

<div>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li>
            <a class="nodecoration"></a>
        </li>
    </ul>
</div>

CSS:

.nodecoration {
    text-decoration:none;
}

When I change my anchor tag to <a id="nodecoration"></a> and change the CSS to:

#nodecoration {
    text-decoration:none;
}

The element now styles. Why is this?

Side note: I am also using Twitter Bootstrap, is the CSS from that interfering?

Answer 1

This is an indication that another style rule has precedence over that rule. You may want to make that rule more specific by using a.nodecoration which should increase its precedence.

FYI, tools like firebug for Firefox will tell you which rule(s) have the higher precedence.

Answer 2

bootstrap already have rule for a, you need to be more specific.

• tag 1 point
• class 10 points
• id 100 point

you may count in this way to know which one is more specific.