选择器类型:
1.标签选择器 如 ul元素
/*标签选择器*/
ul{
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
border: 1px solid red;
}
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;
}
list-style: none;
width: 40px;
height: 40px;
}
3.ID选择器 如#bg-bule
#bg-blue {
/* 注意: id也可以给多个元素添加样式,但不要这样做 */
background-color: lightblue;
}
/* 注意: id也可以给多个元素添加样式,但不要这样做 */
background-color: lightblue;
}
4.类选择器 如 .bg-green
.bg-green {
background-color: lightgreen;
background-color: lightgreen;
}
5.属性选择器 指定li元素下 ID属性=bg-bule
li[id="bg-blue"] {
border: 2px solid red;
}
border: 2px solid red;
}
6.组选择器 指定了 ID选择器#bg-blue 和 类选择器.bg-green
#bg-blue,.bg-green {
border: 1px red solid;
}
#bg-blue,.bg-green {
border: 1px red solid;
}
7.相邻选择器 用+号 表示
#bg-blue + .bg-green {
background-color: yellow;
}
background-color: yellow;
}
8.兄弟选择器,被选择元素后面所有的元素
#bg-blue ~ * {
background-color: blueviolet;
}
background-color: blueviolet;
}
9.伪类:子元素选择器 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
ul :first-child {
background-color: black;
}
ul :first-child {
background-color: black;
}
可以简化
ul :nth-child(3) {
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;
ul li:last-of-type{
background-color: blue;
}
可以简化
ul li:nth-of-type(5) {
background-color: yellow;