为什么这个链接：不选择器不工作？ [英] Why does this chained :not selector not work?

问题描述

我有一个已经被.img类影响的子div。

虽然我插入：not selector for this div as

  .main .content .index-exp .img：not（＃view-image）：not .view-image）{/ * rest * /} 
  

它仍然影响我的div和这个伤害我的大脑。

如果我移除：not（＃view-image） p>

但是 .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.phpmethod =postname =inquiry-form> 
< div> 
< span class =img>< img class =view-imageid =captchasrc =http://akasiayachting.com/wp-content/themes/active3/php/ get_captcha / get_captcha.php/>< / span> 
< span class =img>< img class =view-imageid =code-refreshsrc =http://akasiayachting.com/wp-content/themes/active3/ views / active-71-detail / images / form-icon-refresh.png/>< / span> 
< input name =code-verificationtype =textclass =code-verificationvalue =Security Code/> 
< input name =submittype =submitvalue =发送查询/> 
< / div> 
< / form><！ -  #form  - > 
< / div><！ - ＃inquiry-form  - > 
< / div><！ -  #content  - > 
< / div><！ - ＃view-exp  - > 
< / div><！ - ＃product-exp  - > 
< / div><！ -  #viewers  - > 
< / div><！ -  #container  - > 
< / div> 
< / div> 
< / div> 
  

解决方案

我认为问题是与ID，给它一个：not（#xxx）它给选择器更多的特异性，当这种情况下，它覆盖以前的定义的样式，这就是为什么你看到错误的样式。一旦你删除它它的工作原因，因为以前定义的风格是更具体的。

你可以看到这在行动中使用检查器，它显示应用样式， id（删除id部分并重新运行）

这是您想要的定义

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

最简单的办法是在 #view中添加一个类-image 元素，并将而不是定位到该类，例如

  .main .content .index-exp .img：not（.new_class）：not（.view-image）{/ * rest * /} 
  / pre> 
I have a child div which has been effected by .img class.

Although I insert :not selector for this div as
.main .content .index-exp .img:not(#view-image):not(.view-image){ /*rest*/ }
it is still effecting my div and this hurts my brain.

If I remove :not(#view-image) it is working as expected,

but as .img:not(#view-image):not(.view-image) chained not working.

I know that this kind of usage is true. 

What could be problem.

Here is http://jsfiddle.net/x80vm7y8/6/ address.

My result



Expected result is

<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>

解决方案
I think the issue is with the ID, when you give it a :not(#xxx) it gives the selector more specificity and when that happens it overrides the styles from the previous definition which is why you see the wrong styles. Once you remove it it works because the previously defined style is more specific.

You can see this in action using the inspector, it shows the styles being applied with and without the id (remove id part and rerun)

This is the definition you want
.viewers .product-exp .view-exp .content .inquiry-form div span.img
but when you add the ID, line 69 applies and overrides that.

Simplest thing to do is to add a class to the #view-image element and target the not to that class, something like
.main .content .index-exp .img:not(.new_class):not(.view-image){ /*rest*/ }


                        
这篇关于为什么这个链接：不选择器不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！