CSS3的逻辑AND

Question

我这里有一个非常有趣的问题.
我想同时针对两个条件的目标,但我找不到方法

<div class='redLink'>
    <!-- ... ... ... -->
        <a href='#'>Link</a>
    <!-- ... ... ... -->
</div>


<div>
    <!-- ... ... ... -->
        <a href='#' class='redLink'>Link</a>
    <!-- ... ... ... -->
</div>

---

我理想的CSS会是

[*:not(.redLink) a] AND [* a:not(.redLink)] {
    color:green; 
    /* i.e., color NOT red */
}

但是,操作数,只是一个OR(并且,当它与一个条件不匹配时,它与另一个条件匹配......!).
我唯一AND能找到的就是逻辑连接div#myDivId.someClass,虽然我想要的是类似的东西[div#myDiv a].[div.someClass a]

我的目标是仅针对那些<a/>没有班级.redLink且没有.redLink班级父母的锚.

而且,非常重要的是,我唯一想要的目标是最终的锚点,而不是整个div或整个element.redLink......

谢谢!

Answer 1

不幸的是,使用具有单个规则的CSS选择器无法实现此目的.目前,您只能在a没有使用类的情况下定位元素a:not(.redLink).

无法定位a没有任何.redLink祖先的元素,因为:not()伪类不接受组合子(否则你会这样做a:not(.redLink a)).类似的选择器:not(.redLink) a也不起作用,因为它的目标a元素至少有一个没有类的祖先,这与没有类的祖先的a元素不同.

例如,如果您的结构如下所示:

<div class='redLink'>
    <p>
        <a href='#'>Link</a>
    </p>
</div>

那p没有班级,所以:not(.redLink) a会匹配.

但是,如果您碰巧选择使用jQuery,那么$('a:not(.redLink, .redLink a)')它将起作用,因为:not()在jQuery中比在CSS中更宽松.

如果您只需要使用CSS来完成此操作,最简单的解决方案是将所有a元素设置为绿色,然后覆盖它:

a {
    color: green;
}

a.redLink, .redLink a {
    color: red;
}