元素单位手写代码：
元素选择器：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
*{margin:0;padding:0;}
ul{ /* 标签选择器 */
width:800px;
height:150px;
margin:20px auto;
border:1px solid #6633ff;
}
ul li{ /* 后代选择器/层级选择器 */
list-style:none;
float:left;
width:80px;
height:80px;
background:#ff0066;
border-radius:50%;
font-size:20px;
line-height:80px;
text-align:center;
color:#fff;
}
.li1{ /* class 选择器 */
background:#990000;
}
#li2{/* id 选择器 */
background:#99cc33;
}
li[style]{/* 属性选择器:属性名可以随意命名 */
background:#333333;
}
ul>li[ste="pir"]{ /* 子选择器 */
background:#003399;
}
li[ste="pir"]~ *{/* 相邻选择器:选择当前元素后面的所有标签元素 */
background:#993399;
}
li[ste="pir"] + li{/* 相邻兄弟选择器: 当前元素的后一个元素*/
background:#33cc33;
}
h1,p{ /* 群组选择器:可以选择多个元素 */
text-align:center;
color:red;
}
a{font-size:3rem;}
a:link{color:red;}/* 访问前的a链接变色 */
a:visited{color:#663300;}/* 访问后的a链接变色 */
a:focus{color:#003300;}/* 获取焦点的时候a链接变色 */
a:hover{color:blue;} /* 鼠标悬停a链接变色 */
a:active{color:#ff0033;}/* 鼠标点击a链接变色 */
ul li:first-child{color:red;}/* ul子类的首个元素 */
ul li:last-child{color:#ffff00;}/* ul子类的最后一个元素 */
ul li:nth-child(5){color:#000099;}/* 选择第5个元素，从前向前计算 */
ul li:nth-child(odd){color:#33cc33;}/* 选中奇数 。偶数：even */
/* 伪元素选择器： */
ol li{
font-size:2rem;
color:#999;
}
ol li:only-child{ /* 选择只有一个子类元素的 */
color:#33cc00;
}
ol li:nth-last-child(2){/* 选中所有的ol li里面的子类元素第二个元素*/
color:#660000;
}
ol li:nth-of-type(3){/* 选中所有的ol li里面的子类元素第三个元素*/
color:#33cc66;
}
</style>
</head>
<body>
<ul>
<li class="li1">1</li>
<li id="li2">2</li>
<li style>3</li>
<li ste="pir">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>php中文网</h1>
<p>免费的学习平台</p>
<a href="http://php.cn">php中文网</a>
<ol>
<li>哈哈</li>
</ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ol>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
