html – 与CSS级联:不是伪类
我很困惑为什么这个例子不起作用: CSS: p { color: red; } div:not(.exclude) p { color: green; } HTML: <div> <div class="exclude"> <p>I should be red</p> </div> <div> <p>I should be green</p> </div> </div> 最终结果是< p>是绿色的,但我原本预计第一个是红色的. Here’s a JSFiddle. 有趣的是,我找到了三种不同的方法来使它工作: > Remove顶级< div>来自HTML 另一个奇怪的方法来打破它: >使用解决方案2作为基础,wrap另一个< div>围绕< section> According to MDN:
这是有道理的,但我认为这不会发生在这里.由于< div class =“exclude”>之间没有任何内容和它的直接子< p>,它应该触发规则而不管它嵌套在里面.我错过了什么?如果有人能帮助我理解这一点,我真的很感激. 解决方法
< p>是顶级< div>的后代.和< div class =“exclude”>.因此,虽然后者与选择器不匹配,但前者确实如此,因此您有匹配.无法匹配选择器的祖先更接近于< p>并且无关紧要.而不是那个. 解决方案1和2通过完全消除匹配来工作. 解决方案3在< p>的祖先中不存在其他< div>时起作用,因为这样您就可以按照确切的顺序将选择器限制为那些精确的条件.这意味着如果您从内部< div>交换了class属性对于外部的,它将不再匹配选择器,相反,如果您将类选择器从内部div交换到外部div,则选择器将与原始HTML结构不匹配(再次,假设没有其他< div> s存在于层次结构中). 包装另一个< div>围绕< section>只是让选择器再次被< div>匹配. <节>被忽略,与< div class =“exclude”>的方式大致相同. 也可以看看: > CSS negation pseudo-class :not() for parent/ancestor elements (编辑:鞍山站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |