一、更多选择器
1、更多伪类选择器
-
first-child
选中第一个子元素
first-of-type:选中的是子元素中第一个指定类型的元素 -
last-child
-
nth-child(n)
选中指定的第几个子元素
even:关键字,等同于2n
odd:关键字,等同于2n+1 -
nth-of-type
选中的指定的子元素中第几个某类型的元素
2、更多的伪类元素选择器
-
first-letter
选中元素中第一个字母 -
first-line
选中元素中第一行的文字 -
selection
选中被用户可选的文字
二、更多样式
1、透明度
- opacity:设置的是整个元素的透明度,它的取值范围是0~1(不常用)
- 在颜色位置设置alpha通道(rgba)
2、鼠标
使用cursor设置
3、盒子隐藏
- display:none,不生成盒子
- visibility:hidden,生成盒子,只是从视觉上移除盒子,盒子仍然占据空间
4、背景图
1)和img元素的区别
img元素属于HTML的概念
背景图属于css概念
- 当图片属于网页内容时,必须使用img元素
- 当图片仅用于美化页面时,必须使用背景图
2)涉及的css属性
-
background-image
-
background-repeat
默认情况下,背景图会在横坐标和纵坐标中进行重复 -
background-size
预设值:contain,cover,类似于object-fit
数值或百分比
/* background-size:100% 100%; */
background-size:300px 400px;
- background-position
设计背景图的位置
预设值:left bottom right top center
background-position:center bottom;
数值或百分比:相对位置
雪碧图(精灵图spirit)
5. background-attachment
通常用它控制背景图是否固定
-
背景图和背景颜色混用
-
速写(简写)background
body{
background:url("imgs/main_bg.jpg")no-repeat center/100% #000;
}