网络编程
位置:首页>> 网络编程>> 网页设计>> 30个最常用css选择器解析(3)

30个最常用css选择器解析(3)

作者:iiduce  发布时间:2011-06-16 20:36:37 

标签:css选择器,css,浏览器

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com