目录
[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) 横纵向倾斜