While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening?
Here is the HTML code:
<body>
<div class="container">
<span id="text">Lorem Ipsum</div>
</div>
</body>
And here is the 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;
}
Despite implementing the styles above, all I see is a blank gray background due to the background-color setting in the CSS. I understand that it would be more optimal to not nest the span within the div, but unfortunately, I have to maintain that structure for animation purposes.