简单选择器

元素<class<id（*属于元素级别）

复合类样式选择器（中间不能有空格） (.A.B)
id、class选择器默认可以添加到任何元素上
层叠样式表，相同选择器，后面追加会覆盖前面的样式
#id1{…}
#id1{…} 覆盖上面的
优先级：（#id等价于#id） < .class#id 【.class优先级高于】
.class#id 等价于 #id.class
id选择器主要用于：表单和锚点

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            position: absolute;
            top: 300px;
            left: 300px;
            width: 156px;
            height: 156px;
        }
        .items{
            width: 50px;
            height: 50px;
            margin: 1px;
            background-color: lightblue;
            float: left;
            line-height: 50px;
            text-align: center;
        }
        .items.blue{
            background-color: blue;
        }
        .items#red{
            background-color: lightpink;
        }
        body{
            background-color: lightslategray;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items blue">5</div>
        <div class="items" id="red">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>
</body>
</html>