伪类元素使用

最新推荐文章于 2023-05-24 18:21:22 发布

SSFF12345

最新推荐文章于 2023-05-24 18:21:22 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/YDshuaizai/p/7058728.html

版权

:before　　伪元素可以在元素的内容前面插入新内容。

　　例如在一段文字前面加一个直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1>

:after 伪元素可以在元素的内容后面插入新内容。

　　例如在一段文字后面加一个直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1>

至于选取元素的第一个子元素或者是匹配所有<p>元素下的第一个<li>元素详情见http://www.w3school.com.cn/css/css_pseudo_classes.asp

注：

使用：after清楚浮动的例子

<!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*在此定义相应的类选择器，并根据要求设置相关CSS属性*/ /** { margin: 0px; padding: 0px; } */ .mainBox { width: 960px; /*height: 300px;*/ background-color:#cff; /*overflow: hidden;*/ /*zoom: 1;*/ } .mainBox:after{ display: "block"; clear:both; height:0; content: ""; visibility: hidden; overflow:hidden; } .leftBox { background-color:#C9F; width:740px; height: 300px; float: left; } .rightBox { background-color:#FCF; width:210px; height: 300px; margin-left:10px; float: right; } </style> </head> <body> <div class="mainBox"> <div class="leftBox"> </div> <div class="rightBox"> </div> <!-- <div style="clear: both"></div> --> <!-- <span style="clear: both"></span> --> </div> </body> </html>