• 技术文章 >web前端 >css教程

    css常用属性伪元素和伪元素的总结

    高洛峰高洛峰2017-03-04 17:07:29原创936
    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧。

    其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究竟什么是伪类?什么是伪元素?

    伪类和伪元素的理解:

    官方解释:

    伪类一开始只是用来表示一些元素的动态状态,典型的就是大家常用的链接的各个状态(link、active、hover、visited),随后css2标准
    扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。

    伪元素则代表了某个元素的的子元素,这个子元素虽然逻辑上存在,但是并不实际上存在于文档树中,如我们平时用的after、before等。

    自己粗浅的理解就是伪类就是一个无须标识的类,伪元素则就是一个元素,只是不存在与文档树中。

    关于用法:伪类前面是一个冒号,伪元素前面则是两个冒号。E:first-child伪类,E::first-line伪元素。这是最新的css3标准,但是css2中
    关于after和before都使用一个冒号,这里就需要大家注意了。而且css3还扩展了不少伪类,这里就不提了,感兴趣的自己可以去查资料。

    常见应用:
    伪类:
    1.a链接样式 <a href="#">点击链接</a> a:hover{color:red} 鼠标悬浮字体变红。

    2.隔行变色 <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul> ul li:nth-child(even){background-color:#ccc}或者ul li:nth-chilid(2):{background-clolor:#ccc}

    伪元素:
    清理浮动:
    .clear{zoom:1}
    .clear:after{display:block;content:'';clear:both;}

    关于伪类和伪元素,就讲到这里,有关伪类和伪元素,能做出很多有意思的效果。

    更多css常用属性伪元素和伪元素的总结相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:iconfont字体图标和各种css小图标的详解 下一篇:整理的最全的css clearfix清除浮动的方法
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• CSS变量是怎么工作的?如何使用内联CSS变量进行布局?• 一文了解CSS3中的新属性object-view-box• css3怎样实现不是直角的菱形效果• 原来利用纯CSS也能实现文字轮播与图片轮播!• css样式中有文字描边吗
    1/1

    PHP中文网