代码之家 › 专栏 › 技术社区 › Svish

这些CSS选择器中哪一个彼此“取消”?

css-selectors css

Svish · 技术社区 · 15 年前

我找到了一个很好的例子 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;
}

我想我可以用最后一个来代替前两个,但是我不能百分之百的确定我是否理解它们是如何工作的。有人想弄清楚这件事吗?

我的问题具体地说是这样的:我能跳过其中的一个或两个,在所有链接上仍然得到相同的结果吗?

3 回复 | 直到 15 年前

Harmen 15 年前

我几乎要画出它的维恩图。。。

全部 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"

rel='pdf' 已添加。你可以移除 rel*='pdf' 如果不想设置包含 pdf 在 rel 属性。

Marc 15 年前

但你为什么要这三个?如果第一个可行的话,那就坚持下去。如果那一个不被支持,其他的肯定不会被支持。

Samuel Neff 15 年前

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