<!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/>
它能取得目前这样优秀的成绩,相信自然就具备了格外吸引人的一面</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
联系客服