I was designing a nav bar button, when I got a specificity conflict in the opacity. I used the !important override, but that doesn't seem to be working. Any clues as to the reason?HTML:\[code\] <body> <div class="container"> <span id="text">Lorem Ipsum</div> </div></body>\[/code\]CSS:\[code\] .container { background-color: #000; opacity:0; height: 30px; width: 122px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position:absolute; top:40%; left:43%; } #text { color: #fff; -moz-user-select: none; -webkit-user-select: none; font-family: Courier; position:absolute; top: 5px; left: 5px; width: 122px; opacity:1; !important; } body { background-color: #808080; }\[/code\]After this all I get is a blank gray background (due to the background-color styling). I know it makes much more sense to not nest the span in the div, but I need to do that for animation purposes.
!important specificity override not working
- Thread starter Xidos
- Start date