为什么这个链式 :not 选择器不起作用？

Question

我有一个 child div 已被 .img class.

影响

尽管我为此 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 行应用并覆盖它。

最简单的做法是将 class 添加到 #view-image 元素并将 not 指向 class，类似于

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

为什么这个链式 :not 选择器不起作用？

Why does this chained :not selector not work?

html

css

css-selectors