<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
height: 30px;
}
ul>li {
list-style: none;float: left;width: 30px;height:30px;
font: italic 30px/30px "microsoft sans serif";
background-color: red;border-radius: 50%;text-align: center;margin: 0 5px;
}
#item1 {
background-color: black;
}
.item2 {
background-color: blue;
}
li[class='item3'] {
background-color: #F0AD4E;
}
li[class='item3']+li {
background-color: #C4E3F3;
}
li[class='item4']~li {
background-color: #E4B9C0;
}
#app:first-child {
background-color: red;
}
</style>
</head>
<body>
<div id="test">
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="item2">3</li>
<li class="item3">4</li>
<li>5</li>
<li class="item4">6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>
<!--效果图如下-->
