Question

我找到了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％确定我理解这些是如何工作的。有人想关注这个吗？

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

Answer 1

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

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

Answer 2

这个涵盖了所有用例：

/*  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。

Answer 3

我几乎可以制作维恩的图表......

所有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'属性中包含pdf的链接设置样式，则可以删除rel。

哪些CSS选择器相互“取消”了？

3 个答案: