CSS3基础知识

一、css3与之前的css版本的区别

        css3向下兼容

        css3部分属性在部分浏览器存在兼容性问题

二、css3新增选择器

        1.字符串匹配属性选择器

                元素名[属性="值"]   全匹配 

                元素名[属性^="值"]  表示以"值"开头的元素

                元素名[属性$="值"]  表示以“值”结尾的元素

                元素名[属性*="值"]  表示匹配包含“值”的元素

                元素名[属性~="值"]  匹配用空格分隔后，有等于值的元素

        2. 目标伪类选择器

                选择器[type="chekcbox"]:checked{ }   //选中状态下的样式设置

                选择器[type="text"]:disabled{ }   //禁用状态下的样式设置 

                选择器[type="text"]:read-only{ }   //只读状态下的样式设置 

                not伪选择器： #div:not(){ }  //只要不是（可以跟任何条件）都会被选中 

        3.结构性伪类选择器

                原理
                    必须以父类为选择基准，并且符合以下两个要求： 
                        1. 必须是指定元素 
                        2. 必须是该父元素下所指定的位置（会考虑Body内所有的元素） 

                :nth-child()系列
                       1.first-child
                       2.last-child
                       3.:nth-child()
                                数字指定第几个元素
                                odd 选择奇数
                                even 选择偶数
                                1n 2n 3n  xn表示倍数，几个n就表示几倍
                       4.only-child独生子

                :nth-of-type系列

                        1.nth-of-type()
                                   含义：先指定标签元素，再在同类元素中找第几个，和其他元素无关

                        2.nth-first-of-type

                        3.nth-last-of-type

                        4.only-of-type
                                    同类元素中只找独生子

        4.兄弟元素选择器 

                #p3~span:指定p3同级中的所有span元素 

                #p3+span：指定p3的相邻元素，并且为sapn

三、after和before

        特有属性:content
                    可以输入值
                    还可以输入unicode编码

        after可以清除浮动
            父标签::after{
                      content：“”;
                      display:block;
                      clear:both;

                        }

四、transtion 动画过渡

        属性：        1.取值       2.时间        3.类型        4.延迟

        注意：并不是所以属性都有过渡效果，比如display就没有过渡效果

        1.取值：

                all表示选择所有属性

        2.（待补充）

五、transform 动画变换

        1.类型

               *translate 移动 

                        translateX，横向

                        translateY，纵向

                *rotate（默认是Z轴） 旋转

                        rotateX,水平旋转
                        rotateY 垂直旋转，左右变窄
                        rotateZ 正常旋转

                *scale(默认XY同时缩放) 缩放

                        scaleX
                        scaleY

                *扭曲/斜切 skew

                        说明：第一个参数为x,第二个参数为y

        2.改变中心旋转点 transform-origin

                取值： （待补充）