为什么这个链接的 :not 选择器不起作用？ [复制]

Question

我有一个受 .img 类影响的子 div。

虽然我为此 div 插入 :not 选择器

.main .content .index-exp .img:not(#view-image):not(.view-image){ /*rest*/ }

它仍然影响我的 div，这伤害了我的大脑。

如果我删除 :not(#view-image) 它会按预期工作，

但由于.img:not(#view-image):not(.view-image) 链接不工作。

我知道这种用法是正确的。

可能是什么问题。

这里是http://jsfiddle.net/x80vm7y8/6/ 地址。

我的结果

预期结果是

<div class="main">
    <div class="content">
    <div class="index-exp">
<div class="container">
<div class="viewers">
    <div class="product-exp">
        <div class="view-exp">      
            <div class="content">
                <div class="inquiry-form">
                    <form action="http://akasiayachting.com/wp-content/themes/active3/php/get_sendmail/get_sendmail.php" method="post" name="inquiry-form">
                        <div>
                            <span class="img"><img class="view-image" id="captcha" src="http://akasiayachting.com/wp-content/themes/active3/php/get_captcha/get_captcha.php" /></span>
                            <span class="img"><img class="view-image" id="code-refresh" src="http://akasiayachting.com/wp-content/themes/active3/views/active-71-detail/images/form-icon-refresh.png" /></span>
                            <input name="code-verification" type="text" class="code-verification" value="Security Code" />
                            <input name="submit" type="submit" value="Send Inquiry" />
                        </div>
                    </form><!-- #form -->
                </div><!-- #inquiry-form -->
            </div><!-- #content -->
        </div><!-- #view-exp -->
    </div><!-- #product-exp -->
    </div><!-- #viewers -->    
</div><!-- #container -->
</div>
</div>
</div>

Answer 1

我认为问题出在 ID 上，当您给它一个 :not(#xxx) 时，它会赋予选择器更多的特异性，当这种情况发生时，它会覆盖之前定义中的样式，这就是您看到错误样式的原因。一旦你删除它，它就可以工作，因为之前定义的样式更具体。

您可以使用检查器看到这一点，它显示了带有和不带有 id 的样式（删除 id 部分并重新运行）

这是你想要的定义

.viewers .product-exp .view-exp .content .inquiry-form div span.img

但是当您添加 ID 时，第 69 行将应用并覆盖它。

最简单的做法是将一个类添加到#view-image 元素并将not 定位到该类，类似于

.main .content .index-exp .img:not(.new_class):not(.view-image){ /*rest*/ }