css3添加伪类,CSS3教程:新增加的结构伪类

:nth-child :: css 3选择器

body {

font: small/2 "宋体", serif;

background:#fff;

color:#000;

}

h1,h2,h3 {

font-size: larger;

}

h4 {

background:#eee;

}

#sample1 li:nth-child(even) {

background:#FF9;

}

#sample1 li:nth-child(odd) {

background:#FC3;

}

#sample2 li:nth-child(3n 1) {

background:#F90;

}

#sample2 li:nth-child(3n 2) {

background:#Fc3;

}

#sample2 li:nth-child(3n) {

background:#FF9;

}

#sample3 li:nth-child(1) {

color:#F00;

}

#sample3 li:nth-child(2) {

color:#F60;

}

#sample3 li:nth-child(3) {

color:#FC0;

}

#sample4 {

width:300px;

}

#sample4 td:nth-child(3n 1) {

background:#FCC;

}

#sample4 td:nth-child(3n 2) {

background:#F99;

}

#sample4 td:nth-child(3n 3) {

background:#C6F;

}

#sample5 dt {

font-weight:bolder;

}

#sample5 dt:nth-child(odd){

background:#6CF;

}

css 3 选择器

结构伪类(Structural pseudo-classes)

E:nth-child(n)

双背景色

1. 列表项哦列表项
2. 列表项哦列表项
3. 列表项哦列表项
4. 列表项哦列表项

三背景色

1. 列表项哦列表项
2. 列表项哦列表项
3. 列表项哦列表项
4. 列表项哦列表项
5. 列表项哦列表项
6. 列表项哦列表项

前3名不同显示的排行榜

1. 列表项哦列表项
2. 列表项哦列表项
3. 列表项哦列表项
4. 列表项哦列表项
5. 列表项哦列表项
6. 列表项哦列表项

表格的不同列背景色

表格的不同列背景色

1-11-21-32-12-22-33-13-23-34-14-24-3

所有子元素

dt 1,总排行1

dd 1,总排行2

dt 2,总排行3

dd 2,总排行4

dd 3,总排行5

dt 3,总排行6 dt 4,总排行7

dd 4,总排行8

[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]