1.1 基本选择器
tagName
.className
#idName
*
slector,selector,selector
1.2 层级选择器
selector1 selector2 后代
selectoer1>selectoer2 子元素
selector1+selector2 紧邻在后面的兄弟元素
selector1~selector 后面所有兄弟元素
1.3 属性选择器
selector[attr] 包含指定的属性
selector[attr=value] 指定属性的值
selector[attr^=value] 属性值以value开头
selector[attr$=value] 属性值以value结束
selector[attr*=value] 属性值包含value
selector[][][] 多个属性选择器
-
属性选择器优先级 类比 class
1.4 伪类选择器
/*语法*/
selector:伪类 {
}
:link 未访问的超链接
:visited 访问过的超链接
:hover 鼠标悬停 任意元素
:actived 激活状态的超链接
:focus 获得焦点时
:first-child 兄弟元素中的第一个
:last-child 最后一个
:nth-child() 指定数字，也可以指定关键字"odd", "even" 各行换色
:nth-last-child(2) 指定数字 倒数第几个
:only-child 是否是独生子女
:fist-of-type 分类型后的第一个
:last-of-type 分类后的倒数第一个
:nth-of-type() 指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type() 分类后倒数第几个 指定数字
:only-of-type() 分类后是否唯一
1.5 伪元素选择器
::first-letter 第一个字
::first-line 第一行
::before 最前面插入一个子元素
::after 最后面追加一个子元素 解决自身浮动问题
2 CSS3 基础
2.1 浏览器私有前缀
-weibkit-* chrome/safari
-moz-* firefox
-ms-* ie
-o-* opera
2.2 CSS3 新增的颜色
rgba(r,g,b,不透明度) 不透明度：0~1 小数， 数越大，越不透明
2.3 CSS3新增长度单位
px
em 默认字体大小的倍数
rem 根元素字体大小的倍数 手机上js获取屏幕大小 自适应用的比较多
vw 窗口宽度分成100份 50vw
vh 窗口高度分成100份 也是移动端较多 窗口和html大小的概念不一样
2.4 CSS3新增属性
# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box （width/height盒子的宽高 内陷）
# 外轮廓 在border的外面 不算盒子
outline: none; 最长用来取消input的轮廓
outline-style
outline-color
outline-width
# 不透明度
opacity 0~1 小数 整个盒子的透明度 rgba不包括字体
2.3 设置圆角
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius