10. X[title]
a[title] { color: green; }
属性选择器。比如上述代码匹配的是带有title属性的链接元素。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://css9.net"] { color: #1f6053; }
属性选择器。 上面的代码匹配所有拥有href属性,且href为http://css9.net的所有链接。
这个功能很好,但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢?看下一个选择器。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"]
a[href*="css9.net"] { color: #1f6053; }
属性选择器。正如我们想要的,上面代码匹配的是href中包含"css9.net"的所有链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
属性选择器。上面代码匹配的是href中所有以http开头的链接。 兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href$=".jpg"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
属性选择器。在属性选择器中使用$,用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。(注意,这里仅仅是.jpg图片,如果要作用于所有图片链接该怎么做呢,看下一个选择器。)
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
出处:css9.net
责任编辑:bluehearts
上一页 30个最常用css选择器解析 [2] 下一页 30个最常用css选择器解析 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|