CSS 属性选择器不起作用 a href-前端问题

CSS attribute selector does not work a href(CSS 属性选择器不起作用 a href)

本文介绍了CSS 属性选择器不起作用 a href的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在css中使用属性选择器来改变不同颜色和图像的链接，但它不起作用.

I need to use attribute selector in css to change link on different color and image, but it does not work.

我有这个 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; }

为什么背景不是红色的?

Why isn't the background red?

推荐答案

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

Use the $ after your href. This will make the attribute value to match the end of the string.

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/

这篇关于CSS 属性选择器不起作用 a href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！