20160405

(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;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,680评论 0 7
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,517评论 0 20
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,456评论 1 62
  • 现在开始提提深度学习吧。实际上,正如最初一篇里面神经网络历史里面提到的,神经网络和深度学习很多理论都是上世纪的东西...
    坂本龙一阅读 1,477评论 0 5
  • 三年前我想“逃离”,三年后我竟想“赖着不走”,我总嫌弃你,也少不了抱怨你,偶尔还会骂你几句,其实你知道吗,我最想说...
    shoeishuyun阅读 197评论 0 0