直接上实战源码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本选择器</title>
<style>
*{margin: 0; padding: 0;}
.clearfix:after, .clearfix:before{display: table; content: "";}
.clearfix:after{clear: both; overflow: hidden}
.demo{width: 250px; border: 1px solid #ccc; padding: 10px; margin: 20px auto;}
li{list-style: none outside none; float: left; height: 20px; line-height:20px; width: 20px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px;}
.demo *{background: orange;} /* 适配选择器 */
ul{background: grey;} /* 元素选择器 */
#first{background: lime; color: #000;} /* ID选择器 */
#last{background: #000; color: lime;}
.item{background: green; color: #fff; font-weight: bold;} /* 类选择器 */
/* 类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个 */
.item.important{background: red;} /* 注意：多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素 */
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
原创文章 27
获赞 18
访问量 3万+