Question

当我在不透明度中出现特异性冲突时，我正在设计一个导航栏按钮。我使用了！important覆盖，但这似乎不起作用。关于原因的任何线索？

HTML：

    <body>
    <div class="container">
        <span id="text">Lorem Ipsum</div>
    </div>
</body>

CSS：

    .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;
        }

在此之后，我得到的是一个空白的灰色背景（由于背景颜色样式）。我知道不在div中嵌套跨度更有意义，但我需要为动画目的而这样做。

Answer 1

必须是这样的：

opacity:1 !important;

在;

之前

没有!important

如果.container有opacity:0，则即使您将opacity:1 !important;添加到#text

，此div中的所有元素都将不可见

Answer 2

首先

声明!important写下此opacity:1 !important;而非此opacity:1; !important;。

<强>第二

您将不透明度定义为#text 父，这就是为什么它采用它的父不透明度。因此，您可以使用 RGBA（）而不是不透明度。

像这样写：

.container {
            background-color:rgba(0,0,0,0);
        }

IE的

过滤

background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000);   /* IE6 & 7 */      
zoom: 1;

！重要的特异性覆盖不起作用

2 个答案: