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()伪类不接受组合子（否则你会{{1} }}）。像a:not(.redLink a)这样的选择器也不起作用，因为它定位:not(.redLink) a元素，至少有一个祖先没有类，这与 no的a元素不同该类的祖先。

例如，如果您的结构如下所示：

<div class='redLink'> <p> <a href='#'>Link</a> </p> </div>没有该类，因此p会匹配。

如果您碰巧可以选择使用jQuery，:not(.redLink) a将起作用，因为:not() is much more permissive in jQuery than in CSS。

如果您只需要使用CSS，最简单的解决方案是将所有$('a:not(.redLink, .redLink a)')元素设为绿色，然后覆盖它：

Answer 2

也许你可以像这样颠倒逻辑。将每个链接设为绿色（如果可以在您的站点中使用）并使特定链接再次变为红色。

a {
    color: green; 
}

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

当然，这取决于您网站的结构和复杂性以及可能与此相冲突的其他样式的存在，但如果合理可行，我宁愿选择像JQuery这样的仅限CSS的解决方案。

CSS3的逻辑AND

2 个答案: