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

css伪类

时间:2018-03-06 14:39:39      阅读:877      评论:0      收藏:0      [点我收藏+]

标签:before   必须   idt   hid   class   清除   浮动   多少   AC   

    主要说:before,:after元素这俩个伪类元素怎么用,它们和::before,::after没多少区别,后者是css3里新增的。创建一个假的元素盒子,然后添加样式或者内容。而这个盒子就是里面的content样式。使用这个元素里面必须有content样式。看一下它的使用场景:

    1、添加图片或文字

<p id="text">测试</p>
#text::before{content:"";width:100px;height:100px;background:url("xxx.jpg") no-repert center;}这样就在测试前加了一个图片,content用来做盒子但是这个盒子是虚的,所以叫做伪类。

    2、清除浮动  

#text::after{ content:""; display:block; height:0px; overflow:hidden; clear:both;}

    3、插入文本

#text::after{content:"结尾";color:"#ccc";}输出测试结尾。
#text::before{content:"开始";color:"#666"}输出开始测试

    4、插入项目编号

<ul>
    <li>标题一</li>
    <li>标题二</li>
</ul>
ul li::before{content:(number)"、";}这里就像是字符串拼接,里面的number可以设置不同的样式值,具体百度吧。

    嗯嗯,以上。

  

css伪类

标签:before   必须   idt   hid   class   清除   浮动   多少   AC   

原文地址:https://www.cnblogs.com/Grace-zyy/p/8513945.html

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