30个最常用CSS选择器.docx

子选择器。

与后代选择器XY不同的是，子选择器只对X下的直接子级Y起作用。

在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。

从理论上来讲X>Y是值得提倡选择器，可惜IE6不支持。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

9.X~Y

1

2

3

ul~p{

      color:

red;

   }

相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

10.X[title]

1

2

3

a[title]{

      color:

green;

   }

属性选择器。

比如上述代码匹配的是带有title属性的链接元素。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

11.X[title=foo]

1

2

3

a[href=""]{

     color:

#1f6053;

}

属性选择器。

上面的代码匹配所有拥有href属性，且href为 的所有链接。

这个功能很好，但是多少又有些局限。

如果我们希望匹配href包含的所有链接该怎么做呢？

看下一个选择器。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

12.X[title*=]

1

2

3

a[href*=""]{

     color:

#1f6053;

   }

属性选择器。

正如我们想要的，上面代码匹配的是href中包含””的所有链接。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

13.X[href^=http]

1

2

3

4

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]

1

2

3

4

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]实现，需要这样做：

1

2

3

4

5

6

a[href$=".jpg"],

a[href$=".jpeg"],

a[href$=".png"],

a[href$=".gif"]{

     color:

red;

  }

看上去比较麻烦。

另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’

html代码

1

图片链接

css代码如下：

1

2

3

a[data-filetype="image"]{

      color:

red;

   }

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

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

15.X[foo~=bar]

属性选择器。

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

看下面例子：

html代码

1

ClickMe,Fool

css代码

1

2

3

4

5

6

a[data-info~="external"]{

      color:

red;

   }

a[data-info~="image"]{

      border:

1pxsolidblack;

   }

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

匹配data-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

17.X:

checked

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

1

2

3

input[type=radio]:

checked{

      border:

1pxsolidblack;

   }

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

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

18.X:

after和X:

before

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

1

h1:

after{content:

url（/i/logo.gif）}

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

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

1

2

3

4

5

6

7

8

9

10

11

12

.clearfix:

after{

       content:

"";

       display:

block;

       clear:

both;

       visibility:

hidden;

       font-size:

0;

       height:

0;

      }

.clearfix{

      *display:

inline-block;

     _height:

1%;

   }

19.X:

hover

1

2

3

div:

hover{

     background:

#e3e3e3;

   }

:

hover伪类设定当鼠标划过时元素的样式。

上面代码中设定了div划过时的背景色。

需要注意的是，在ie6中，:

hover只能用于链接元素。

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

代码如下：

1

2

3

a:

hover{

    border-bottom:

1pxsolidblack;

   }

兼容浏览器：

IE6+、Firefox、Chrome、Safari、Opera

20.X:

not（selector）

1

2

3

div:

not（#container）{

      color:

blue;

   }

否定伪类选择器用来在匹配元素时排除某些元素。

在上面的例子中，设定除了id为container的div元素字体颜色为blue。

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

21.X:

:

pseudoElement

:

:

伪类用于给元素片段添加样式。

比如一个段落的第一个字母或者第一行。

需要注意的是，这个:

:

伪类只能用于块状元素。

下面的代码设定了段落中第一个字母的样式：

1

2

3

4

5

6

7

p:

:

first-letter{

      float:

left;

      font-size:

2em;

      font-weight:

bold;

      font-family:

cursive;

      padding-right:

2px;

   }

下面的代码中设定了段落中第一行的样式：

1

2

3

4

p:

:

first-line{

      font-weight:

bold;

      font-size:

1.2em;

  }

兼容浏览器：

IE6+、Firefox、Chrome、Safari、Opera

（IE6竟然支持，有些意外啊。

）

22.X:

nth-child（n）

1

2

3

li:

nth-child（3）{

      color:

red;

   }

这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。

在上面例子中，设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：

1

2

3

tr:

nth-child（2n）{

      background-color:

gray;

   }

兼容浏览器：

IE9+、Firefox、Chrome、Safari

23.X:

nth-last-child（n）

1

2

3

li:

nth-last-child

（2）{

      color:

red;

   }

与X:

nth-child（n）功能类似，不同的是它从一个序列的最后一个元素开始算起。

上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

24.X:

nth-of-type（n）

1

2

3

ul:

nth-of-type（3）{

      border:

1pxsolidblack;

   }

与X:

nth-child（n）功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。

例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器：

IE9+、Firefox、Chrome、Safari

25.X:

nth-last-of-type（n）

1

ul:

nth-last-of-type（3）{border:

1pxsolidblack;}

与X:

nth-of-type（n）功能类似，不同的是它从元素最后一次出现开始算起。

上面例子中设定倒数第三个无序列表的边框

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

26.X:

first-child

:

first-child伪类用于匹配一个序列的第一个元素。

我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：

1

2

3

ul:

nth-last-of-type（3）{

      border:

1pxsolidblack;

   }

兼容浏览器：

IE7+、Firefox、Chrome、Safari、Opera

27.X:

last-child

1

2

3

ul>li:

last-child{

      border-bottom:

none;

  }

与:

first-child类似，它匹配的是序列中的最后一个元素。

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

28.X:

only-child

1

2

3

divp:

only-child{

      color:

red;

   }

这个伪类用的比较少。

在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

1

2

3

4

5

6

在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

29.X:

only-of-type

1

2

3

li:

only-of-type{

      font-weight:

bold;

   }

这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。

例如上面代码匹配仅有一个列表项的列表元素。

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera

30.X:

first-of-type

:

first-of-type伪类与:

nth-of-type

（1）效果相同，匹配出现的第一个元素。

我们来看个例子：

1

2

3

4

5

6

7

8

9

10

11

在上面的html代码中，如果我们希望仅匹配ListItem2列表项该如何做呢：

方案一：

1

2

3

ul:

first-of-type>li:

nth-child

（2）{

      font-weight:

bold;

  }

方案二：

1

2

3

p+ulli:

last-child{

      font-weight:

bold;

   }

方案三：

1

2

3

ul:

first-of-typeli:

nth-last-child

（1）{

      font-weight:

bold;

   }

兼容浏览器：

IE9+、Firefox、Chrome、Safari、Opera。

总结：

如果你正在使用老版本的浏览器，如IE6，在使用上面css选择器时一定要注意它是否兼容。

不过，这不应成为阻止我们学习使用它的理由。

在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。

另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度。