/* li:first-child {
color:red
}
li:last-child {
color: aqua;
background-color: yellow;
}
li:nth-child(3) {
background-color: #abcdef;
} */
/* li:nth-child(even) */
li:nth-child(2n) {
background-color: violet;
}
/* li:nth-child(odd) */
li:nth-child(2n-1) {
background-color: yellow;
}
/* 从第三个开始,,包含第三个 */
li:nth-of-type(n+3) {
color: #ccc;
}
/* 前三个,包含第三个 */
li:nth-of-type(-n+3) {
color: tomato;
}
/* 背景平铺
repeat 水平和垂直方向都平铺
repeat-x 水平方向都平铺
repeat-y 垂直方向都平铺
no-repeat 水平和垂直方向都不平铺
*/
background-repeat: no-repeat;
/* 背景位置
方位名词:最多表示9个位置 水平方向 left center right 垂直方向 top center bottom
数字+px : 0 0 左上角 x y
注意:方位名词可以和坐标轴混用,第一个表示水平 第二个表示垂直
*/
background-position: 10px center;
}
/* 复合写法
background:color image repeat position
*/
/* background: red url(./img/logo.png) no-repeat left center; */
background: yellow url(./img/logo.png) no-repeat;
background-position: left center;
分开写的需要写在下面,不然会被覆盖不显示
块级元素:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
- h1~h6,ul,li ,p,ol,dl ,dt,dd ,header,nav,main,footer
行内元素:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- span,b,u,i,em,strong
行内块元素
- 一行可以显示多个
- 可以设置宽高
- input textarea,select,button,img