基本选择器使用一

<!DOCTYPE html>
<html>
<head>
    <title>基本选择器使用</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 #cccccc; 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: #36;color: green;margin-right: 5px;}
        .demo *{background: orange}
        /*--元素选择器*/
        ul{background: grey}
        /*--id选择器*/
        #first{background: lime;color: #000}
        #last{background: #000000;color: lime}
        /*类选择器*/
        .item{background: green;color:#fff;font-weight: bold}
        .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 class="last" id="last">9</li>
    </ul>
</body>
</html>