CSS属性选择器不工作href [英] CSS attribute selector does not work a href

问题描述

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

我有这个html：

 < a href =/ manual.pdf> A PDF文件< / a> 
  

此css：

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

为什么背景不是红色的？

解决方案

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

  a [href $ ='。pdf' * css * /} 
  

JSFiddle：http://jsfiddle.net/UG9ud/

  E [foo] foo属性（CSS 2）
 E [foo =bar]其foo属性值与bar完全相等的元素（CSS 2）
 E [foo〜 bar]一个E元素，其foo属性值是一个空白分隔值的列表，其中一个正好等于bar（CSS 2）
 E [foo ^ =bar] an E元素，其foo属性值正好以字符串bar开头（CSS 3）
 E [foo $ =bar]一个E元素，其foo属性值以字符串bar CSS 3）
 E [foo * =bar]一个E元素，其foo属性值包含子串bar（CSS 3）
 E [foo | =en] an E元素，其foo属性具有以en开头（左侧）的连字符值列表（CSS 2）
  

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

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

I have this html:

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

And this 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?

解决方案

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)

source: http://www.w3.org/TR/selectors/

这篇关于CSS属性选择器不工作href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！