|
选择器{样式 } 类选择器 ： 相同的元素 定义成不同的样式 伪类选择器： 系统的选择器 不能随意起名字
伪类选择器以及伪元素 <!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
|
