这些 CSS 选择器中的哪一个会“相互抵消”？答案

【问题标题】：Which of these CSS selectors "cancel" each other out?这些 CSS 选择器中的哪一个会“相互抵消”？
【发布时间】：2010-10-19 10:54:40
【问题描述】：

我找到了Showing Hyperlink Cues with CSS 的一个简洁示例。但是在示例的 CSS 中，有三种不同的样式在我的脑海中应该做大部分相同的事情。或者至少，在我看来，我不应该使用所有这些。但我不确定我是否都得到了它们。他们在这里：

/* all A tags whose REL attribute equals pdf */
a[rel='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/* all A tags whose REL attribute contains the value pdf, seperated from other values with a space */
a[rel~='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

我想我可以用最后一个替换前两个，但我不能 100% 确定我理解这些是如何工作的。有人愿意对此有所了解吗？

我的问题具体是这样的：我可以跳过其中的一两个，仍然在我的所有链接上得到相同的结果吗？

【问题讨论】：

那么，究竟是什么问题？
@Harmen：更新问题以明确

标签： css css-selectors

【解决方案1】：

乍一看，第二个应该也涵盖了第一个和第三个。但问题是可能有浏览器不支持第二个版本，因此需要第一个。

但是你为什么要这三个？如果第一个应该工作，那么坚持那个。如果那个不支持，其他的肯定不会支持。

【讨论】：

【解决方案2】：

我几乎会制作它的维恩图......

所有rel='pdf' 都被rel~='pdf' 否决

所有rel~='pdf' 都被rel*='pdf' 否决

例如：

[rel*='pdf'] 将设置rel="pdfdoc" 的样式，而[rel~='pdf'] 和[rel*='pdf'] 不会
[rel*='pdf'] 和[rel~='pdf'] 都将设置rel="pdf doc" 的样式，而[rel='pdf'] 不会
所有选择器都会设置rel="pdf"的样式

并非所有浏览器都可以处理这些 CSS3 选择器，我认为这就是添加 rel='pdf' 的原因。如果您不想在rel 属性中设置包含pdf 的链接样式，则可以删除rel*='pdf'。

【讨论】：

聪明。思考维恩图实际上使整个事情变得非常明显！

【解决方案3】：

这个涵盖了所有用例：

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

因为它匹配 pdf 文本中的任何位置。

【讨论】：

这意味着它会匹配例如rel="pdf-document"，然后我想？
请记住，如果您在同一规则中包含所有三个选择器，如果浏览器无法识别任何一个，则整个规则将被忽略 b> 的选择器。
@BoltClock：不知道你现在的意思。整个规则将被忽略？如果没有元素与其中任何一个匹配，那不是重点吗？或者你是什么意思？
@Svish：如果元素匹配其中任何一个但浏览器不理解其他元素，浏览器将不会应用样式。因此，例如 <a rel="pdf"> 不会获得旧版本 Opera 上的样式（只是一个示例），即使它匹配，因为它们不识别 *=。
@BoltClock：啊啊，所以我想这就是它当时被拆分的原因。