1 CSS3 的选择器
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[][][] 多个属性选择器
1.4 伪类选择器
:link 未访问的超链接
:visited 访问过的超链接
:hover 鼠标悬停 任意元素 :actived 激活状态的超链接 :focus 获得焦点时 :first-child :last-child :nth-child() 指定数字,也可以指定关键字"odd", "even" :nth-last-child :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 默认字体大小的倍数
2.4 CSS3新增属性
# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box (width/height盒子的宽高) # 外轮廓 在border的外面 不算盒子 outline: outline-style outline-color outline-width # 不透明度 opacity 0~1 小数
2.3 设置圆角
border-radius
border-top-left-radius
border-top-right-radius border-bottom-left-radius border-bottom-right-radius