pbpgyw1909
New Member
I am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:http://jsfiddle.net/whoiskb/Za2TB/HTML\[code\]<div class="teaser"> <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1></div>\[/code\]CSS (plus an external link to twitter bootstrap)\[code\]div.teaser h1.teaserText { font-size: 100px; font-weight: 100; color: black; line-height: 90px; font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial"; text-transform: uppercase;}div.teaser h1.teaserText label { color: #FCCE00;}?\[/code\]From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.Could someone explain what I am missing here? BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.ThanksKevin