目标仅确定具有 rel 属性的链接答案

【问题标题】：target only determined links with a rel atribute目标仅确定具有 rel 属性的链接
【发布时间】：2013-11-05 12:10:49
【问题描述】：

我检查了输入元素的特殊选择，如here 所示。我试图应用它来选择除具有 rel 属性的链接之外的所有链接。这里有例子：

CSS

.language a:not[rel=author]{
    background: red;
}

HTML

<section class="language">
   <a href="/en/">
       <abbr lang="en" title="english">EN</abbr>
   </a>
   <a href="/spa/">
       <abbr lang="es" title="english">ES</abbr>
   </a>
   <a href="http://whatever.com/" rel="author">Designed by me</a>
</section>

我只想定位前两个链接。我想避免一个类并尝试使用 CSS 来定位它们。

【问题讨论】：

标签： html css rel

【解决方案1】：

这样做：

.language a:not([rel=author]){
    background: red;
}

你只是忘记了 :not 后面的括号

【讨论】：

【解决方案2】：

选择所有没有rel 属性的锚点：

.language a:not([rel]){
    background:#F00;
}

JSFiddle

【讨论】：

【解决方案3】：

只针对属性...

.language a abbr[title="english"] {
   /* woohoo! */
}

【讨论】：

【解决方案4】：

您应该使用use the [att~=val] attribute selector，而不是[att=val] 属性选择器：

.language a:not([rel~=author]){
    background: red;
}

如果author 不是rel 属性的only 值，

[rel~=author] 也匹配。所以它匹配如下链接：

<a href="http://whatever.com/" rel="author">Designed by me</a>
<a href="http://whatever.com/" rel="author external">Designed by me</a>
<a href="http://whatever.com/" rel="author external nofollow">Designed by me</a>
<!-- … -->

【讨论】：