css3 笔记01

目录

01 css3选择器

02 伪类选择器

03 伪元素选择器

04 文章分割列

05 浏览器hack写法

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