基本选择器的用法: 属性, 兄弟, 类型, 伪类7.4

 选择器类型：

1.标签选择器  如 ul元素 

/*标签选择器*/
ul{
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    border: 1px solid red;
}

2.层级选择器 如 ul li  指的是UL的后代元素LI

ul li{
    list-style: none;
    width: 40px;
    height: 40px;
}

3.ID选择器 如#bg-bule

#bg-blue {
   /* 注意: id也可以给多个元素添加样式,但不要这样做 */
   background-color: lightblue;
}

4.类选择器 如 .bg-green

.bg-green {
   background-color: lightgreen;

}

5.属性选择器     指定li元素下 ID属性=bg-bule

li[id="bg-blue"] {
   border: 2px solid red;
}

6.组选择器    指定了 ID选择器#bg-blue 和 类选择器.bg-green
#bg-blue,.bg-green {
   border: 1px red solid;
}

7.相邻选择器  用+号 表示

#bg-blue + .bg-green {
   background-color: yellow;
}

8.兄弟选择器,被选择元素后面所有的元素

#bg-blue ~ * {
   background-color: blueviolet;
}

9.伪类：子元素选择器      子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
ul :first-child {
   background-color: black;
}

可以简化
ul :nth-child(3) {
   background-color: black;
}

10.伪类：类型选择器    伪类 类型选择器关注点在 "type" 关键字上,重点是元素的类型
ul li:last-of-type{
   background-color: blue;
}
可以简化
ul li:nth-of-type(5) {
   background-color: yellow;