<!DOCTYPE html>
<html lang="en"><!--//網頁根元素 可使用root-->
<head>
<meta charset="UTF-8">
<title>偽類選擇器以及偽元素</title>
<script type="text/javascript" src="繪制動畫.js"></script>
<style>
:root{
background-color: blanchedalmond;//根元素背景
}
body{
background-color: lightgreen;
}
p.left{
text-align: left;
color: #e54d26;
}
p.right{
text-align: right;
color:chartreuse;
}
a:link{
color: violet;
}
a:visited{
color: #222222;
}
a:hover{//放在上面時
color: aqua;
}
a:active{//正在點擊
color:#d2d2d2;
}
p:first-line{//元素第一行使用
color: violet;
}
p:first-letter{//首字母
color:red;
font-size: 24px;
}
p:before{
color: gold;
font-size: 19px;
content: "融水公子";
}
p:after{
color: blue;
font-size: 34px;
content: "1314520";
}
li{
list-style: none;//去圓點
}
li:before{
content: ".";
color: gold;
}
li:after{
content: "__after 追加文字";
color: #222222;
}
// 結構性偽類選擇器root not empty target
</style>
</head>
<body onload="draw(''canvas'')">
<h1>類選擇器</h1>
<p class="left">偽類選擇器</p>
<p class="right">偽類選擇器</p>
<br/>
<a href="繪制動畫.js">繪制動畫</a>
<p>作為長期占據著大7座SUV"霸主"的漢蘭達而言，<br/>
它能取得目前這樣優(yōu)秀的成績，相信自然就具備了格外吸引人的一面</p>
<ul>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
<li><a href="index.html">偽類選擇器</a></li>
</ul>
<canvas id="canvas" width="400",height="400"></canvas>
</body>
</html>
分享知識，分享快樂！希望中國站在編程之巔！----融水公子
公眾微信號：rsgz520
360圖書館館號：rsgz002.360doc.com
