伪类元素使用
: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>