实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;}
ul{
margin:0px;
padding:50px 10px;
width:600px;
border:1px solid red;
}
ul:after {
content: '';
display: block;
clear: both;
}
ul li{
list-style:none;
width:40px;
height:40px;
text-align:center;
margin:5px;
line-height:40px;
border-radius:50%;
float:left;
box-shadow: 2px 2px 2px #888;
background-color: skyblue;
}
ul,h2,p,li{
font-weight: lighter;
}
#id1{
background-color: pink;
}
.class1{
background-color: black;
}
body ul li{
background-color: blue;
}
li{
background-color: greenyellow;
}
ul>li{
background-color: black;
}
ul li[class]{
background-color: gold;
}
ul li[class="class5"]{background-color: grey;}
ul li[class^="class2"]{background-color: #666;}
ul li[class$="s4"]{background-color: red;}
ul li[class*="class5"]{background-color: #fff;}
ul li[class="class5"]~*{background-color: pink;}
ul li[class="class5"]+li{background-color: grey;}
a {font-size: 2rem;}
a:link {color:red;}
a:visited {color: orange;}
a:focus {color:purple;}
a:hover {color:green;}
a:active {color:blue;
ul li:first-child {background-color: #efefef;}
ul li:last-child {background-color: red;}
ul li:nth-child(8) {background-color: red;}
ul li:nth-child(2n+1) {background-color: purple;}
ol :only-child {background-color: lawngreen;}
ul li:nth-last-child(3) {background-color: wheat;}
ol li:nth-of-type(2) {background-color: wheat;}
</style>
</head>
<body>
<ul>
<li id="id1">1</li>
<li class="class1">2</li>
<li class="class2 class3 class4">3</li>
<li class="class5">4</li>
<li class="class22">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h2>我是案例</h2>
<p>我还是案例</p>
<ol>
<li>列表项1</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
