偽類元素使用
阿新 • • 發佈：2017-06-21
solid :after targe 匹配 div get head after http
: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> 偽類元素使用