(1)
xx:nth-child(n) 选择器匹配属于其父元素xx的第 n个子元素,不论元素的类型。
n可以是数字、关键词或公式。
常用于间隔的背景颜色,比如:
tr:nth-child(2n) {
background: #eee;
}
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
(2)
使用CSS3实现选项卡切换
①body里创建3个div,css设置各自不同的颜色以及共同位置(重叠)。
②三个div分别有自己的id,再创建3个a标签,href指定锚是刚刚三个div的id
③在css里设置当选中锚的时候采取的动作,这里是采取z-index使其位置居上,每次点击a标签就可以使得该选中div放在最上面
由此实现一个切换的效果
或者直接写:display:block;
要切换动画可以在target中说明:
animation: animation .5s;
具体代码:
html:
css:
.cbox>.citem:target{
z-index:4;
}
网友评论