码迷,mamicode.com
首页 > Web开发 > 详细

css学习二

时间:2016-07-11 07:52:00      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

(1) 伪 类

伪类分为 ui伪类 与 结构化伪类

先说下ui伪类 

 UI( User Interface,用户界面)伪类会在 HTML 元素处于某个状态时(比如鼠标 指针位于链接上),为该元素应用 CSS 样式。

 

链接伪类::link{未被点击时}

                 :hover{鼠标悬浮时}

                 :active{被选择时}

                 :visited{被访问过时}

注意,如果在样式表中上面四个伪伪类不是按序写的话,在某些情况下是无法起作用的。

 

focus伪类

      :focus {获得焦点时}技术分享  技术分享

 

 target伪类

  :taregt{某个元素被链接过来时}技术分享 技术分享

 

 

这里说一下结构化伪类

 结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第 一个或最后一个等),为相应元素应用 CSS 样式。
   

结构化伪类大体上有下面几种

:first-child 选择所选元素集合中第一个元素 技术分享技术分享

 

:last-child 选择所选元素集合中最后一个元素

:nth-child()  :nth-child(even)选择所选元素集合中(下标+1)为偶数的元素技术分享 技术分享。:nth-child(odd)为奇数。另外,:nth-child()还可以表示许多复杂的结构关系。

 

(2)伪元素

先讲一下:before :after 

见词知意,:before :after分别为选中选择元素内部前后添加内容

技术分享  技术分享

这边重要的应用是清除浮动

 

 技术分享  这边利用:after 给父元素div内部增加了一个伪元素:after,改变其display样式,给其应用clear:both样式

达到清除浮动样式。

 需要另外兼容低版本ie的话,

 技术分享,效果如下技术分享。可见,父元素的高度塌陷情形已经消失了。

 

css学习二

标签:

原文地址:http://www.cnblogs.com/absonAlex/p/5659035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!