30个最常用css选择器解析（3）

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