这些CSS选择器中的哪个“彼此取消”？

我发现了一个整洁的例子Showing Hyperlink Cues with CSS。但是在这个例子的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％肯定我明白这些是如何工作的。任何人都在关注这个问题？

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

来源

2010-10-18 Svish

那么，究竟是什么问题？ – Harmen 2010-10-18 18:01:55

@Harmen：更新问题以清除 – Svish 2010-10-18 18:02:24

我几乎会使它维恩图...

所有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'。

来源

2010-10-18 18:14:16 Harmen

聪明。思维维恩图使事情变得非常明显！ – Svish 2010-10-18 18:28:25

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

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

来源

2010-10-18 18:08:54 Marc

这一个涵盖所有用例：

/* 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在文本中的任何地方。

来源

2010-10-18 18:10:22

这意味着它将匹配exampe'rel =“pdf-document”'以及我想呢？ – Svish 2010-10-18 18:12:17

@Svish：这是正确的。 – BoltClock 2010-10-18 18:12:58

请记住，如果您将所有三个选择器都包含在同一个规则中，*如果浏览器不能识别任何一个选择器**，则整个规则将被忽略*。 – BoltClock 2010-10-18 18:13:45

这些CSS选择器中的哪个“彼此取消”？

回答

相关问题