目录
[01 css3选择器](#01 css3选择器)
[02 伪类选择器](#02 伪类选择器)
[03 伪元素选择器](#03 伪元素选择器)
[04 文章分割列](#04 文章分割列)
[05 浏览器hack写法](#05 浏览器hack写法)
[06 css3中的2D转换](#06 css3中的2D转换)
01 css3选择器
选择器+选择器{} 表示选择下一个兄弟
选择器1~选择器2{} 表示选中选择1后面所有包含选择器2的元素.
属性名\]{} 包含属性名的选择器 选择器\[属性名\]{} \['属性名'='属性值'\]{} \['属性名'\^='属性值'\]{} 表示属性以属性值开头 \['属性名'$='属性值'\]{} 表示属性以属性值结尾 \['属性名'\~='属性值'\]{} 表示属性中是否包含属性值 动态伪类 :focus 目标伪类 :target 锚点激活的对应元素的选择器 :enabled 元素可用状态的时候生效 只要针对表单元素 只要这个表单元素没有设置disabled属性 都属性可用状态 :disabled 当表单元素设置了disable属性的时候生效 :checked 单选多选按照被选中的时候的状态 > ###### 02 伪类选择器 > 结构伪类: li :first-child 表示选中第一个li li:last-child 表示选中最后一个li :only-child 当前选择器选择的所有的元素中 如果当前元素在父元素中是独生子元素 则选择器生效 :empty{} 当前选择器选择到的所有的元素中 元素内容为空时选中 :nth-child(){} 当前选择器选择到的所有元素中 在父元素中排行指定序号的元素 序号从1开始 否定伪类: :not(选择器) 表示选中不包含这个选择器的元素 > ###### 03 伪元素选择器 > ::first-letter 选择第一个字符 ::first-line 选择第一行 ::selection 针对选中的内容 伪元素选择器 :after :before 动态给当前元素的前一位/后一位添加内容 content必写属性 伪元素是行内元素 > ###### 04 文章分割列 > 文章分割列属性: column-count: 分割的列数 column-gap:px值 列和列之间的间隔 column-rule:px值 边框样式 边框颜色 列和列之间的间隔边框 > ###### 05 浏览器hack写法 > 某些属性不同内核的浏览器有兼容性问题 需要需要加入 css前缀 针对 谷歌的兼容: -webkit-属性名:属性值 针对火狐的兼容 -moz-属性名:属性值 针对欧朋的兼容 -o-属性名:属性值 针对IE的兼容 -ms-属性名:属性值 > ###### 06 css3中的2D转换 > 转换的四个方式: **1.位移 transform:translate()** 位移: transform:translateX(px值) 横向位移 transform:translateY(px值) 纵向位移 transform:translate(x,y) 横纵位移 **2.旋转 transform:rotate()** 旋转: transform:rotateX(deg角度); 3D转换下效果明显 transform:rotateY(deg角度); 3D转换下效果明显 transform:rotateZ(deg角度); 圆心在图片中间 顺时针旋转 修改转换属性的圆心: transform-origin:x位置 y位置 默认值是center 0 0 是当前元素的 左上角 **3.缩放 transform:scale()** 缩放: transform:scale(整数或者小数) 1为不缩放, 大于1为放大, 小于1的小数位缩小 0.9缩小10分之一 **4.倾斜 transform:skew()** 倾斜: transform:skew(deg角度) transform:skewX() 横向倾斜 transform:skewY() 纵向倾斜 transform:skew(x,y) 横纵向倾斜