html - CSS3 的逻辑与

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]

我的目标是只针对那些 anchor <a/>没有类 .redLink并且没有 parent 与.redLink要么上课。

而且，非常重要的是，我唯一想要定位的是最终 anchor ，而不是整个 div 或整个 element.redLink ...

谢谢!

Answer 1

不幸的是，您无法使用具有单一规则的 CSS 选择器来实现此目的。目前，您只能使用 a:not(.redLink) 定位没有类的 a 元素。

无法定位没有任何 .redLink 祖先的 a 元素，因为 :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() is much more permissive in jQuery than in CSS .

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

a {
    color: green;
}

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