php li 选择器,基本选择器的用法: 属性, 兄弟, 类型, 伪类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;