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

14. X[data-*="foo"]

在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，需要这样做：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
     color: red;
  }

看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’

html代码

<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>

css代码如下：

a[data-filetype="image"] {
      color: red;
   }

这样所有链接到图片的链接字体颜色为红色。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

15. X[foo~="bar"]

属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：

html代码

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

css代码

a[data-info~="external"] {
      color: red;
   }
a[data-info~="image"] {
      border: 1px solid black;
   }

在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

input[type=radio]:checked {
      border: 1px solid black;
   }

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

h1:after {content:url(/i/logo.gif)}

上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：

.clearfix:after {
       content: "";
       display: block;
       clear: both;
       visibility: hidden;
       font-size: 0;
       height: 0;
      }      
.clearfix {
      *display: inline-block;
     _height: 1%;
   }

19. X:hover

div:hover {
     background: #e3e3e3;
   }

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。

需要注意的是，在ie 6中，:hover只能用于链接元素。

这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：

a:hover {
    border-bottom: 1px solid black;
   }

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

div:not(#container) {
      color: blue;
   }

否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera