html CSS属性选择器在href中不起作用

fcy6dtqo  于 2023-08-01  发布在  其他
关注(0)|答案(3)|浏览(121)

我需要在CSS中使用属性选择器来更改不同颜色和图像的链接,但它不起作用。
我有这个html:

<a href="/manual.pdf">A PDF File</a>

字符串
这个CSS:

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }


为什么背景不是红色的?

yqkkidmi

yqkkidmi1#

在href后面使用$。这将使属性值与字符串的结尾匹配。

a[href$='.pdf'] { /*css*/ }

字符串
JSFiddle:http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)


来源:http://www.w3.org/TR/selectors/

8qgya5xd

8qgya5xd2#

可接受的答案(使用a[href$='.pdf'])假设指向pdf的链接总是以.pdf结尾。这不一定是这种情况,因为链接可以具有查询字符串或散列片段,例如具有UTM跟踪代码或页码,在这种情况下,这些链接将不匹配。事实上,根据您的应用程序,这可能是大多数链接的情况。

<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>

字符串
如果您想确保您的规则也适用于这些情况,您可以在属性中的任何位置匹配.pdf

a[href*='.pdf']


然而,这将匹配一些不太可能但意想不到的东西,例如子域our.pdf.domain.com/a-page。但是我们可以进一步缩小它的范围,因为我们知道我们只会使用它来匹配具有查询字符串或散列片段的PDF。如果我们合并这3种情况,我们应该匹配所有的PDF链接。

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}

qnzebej0

qnzebej03#

这个也应该工作:
a[href*='.pdf'] { background:red; }

相关问题