第六章：CSS3基础---层级选择器、属性选择器、c3状态伪类选择器、结构伪类选择器、否定选择器、渐变属性、过渡属性、盒子阴影、文字阴影、变形属性---2d/3d

<1..css3层级选择器(权重由各个选择器相加)>

    1. 子代选择器           选择器>选择器{}

    2. 相邻后面的兄弟       选择器+选择器{}

    3. 相邻后面的兄弟们     选择器~选择器{}

<2..c3属性选择器(权重值和class一样,可以选择到自定义属性)>

    1. [属性名]{} 根据属名选择性

    2. [属性名="属性值"]{} 根据属性名和属性值匹配

    3. [属性名^="值"]{} 属性名对应的值以该值开头

    4. [属性名$="值"]{} 属性名对应的值以该值结束

    5. [属性名*="值"]{} 属性名对应的值中包含该值

<3..c3状态伪类选择器(选择器权重为10)>

    1. 表单元素:enabled{} 可编辑状态

    2. 表单元素:disabled{} 不能编辑状态

    3. 表单元素:checked{}  选中状态 单选或者多选选中

        - 利用label扩大单选或者多选选择范围 label的for属性值指向绑定的id名

    4. 表单元素::placeholder{} 提示信息

<4..c3结构伪类选择器>

    带child

        :first-child{} 第一个

        :last-child{} 最后一个

        :nth-child(n){} 正数第几个 可以是数字odd(奇数)/even(偶数)/数学表达式

        :nth-last-child(){} 倒数第几个

    带type

        :first-of-type{}

        :last-of-type{}

        :nth-of-type(){}

        :nth-last-of-type{}

    注意: :前面写的是子元素，如果子元素的一样的话，两者是一样用，子元素不一样的话，child看当前元素的第几个，type是看该类型的元素中是第几个

<5..c3否定选择器>

    元素:not(选择器){} 选择到该选择器之外的其他元素

    li:not(.a1){} 选择到除了class名叫a1的li

<6..c3渐变属性>

 （1）线性渐变

        background-image/background:linear-gradient([方向,]颜色值1,颜色值2)

            方向：可选

                to bottom 向下,默认

                to right  向右

                to right bottom 向右下角

                数值deg

 （2）重复性的线性渐变    

        background-image/background:repeating-linear-gradient([方向,]颜色值1 数值px,颜色值2 数值px)

        如果当前是向下的渐变高度为200 会将高度划分为0-200的区间 0-30红色纯色 30-35渐变色 35-200粉色纯色

        background-image: repeating-linear-gradient(red 30px,pink 35px);

<7..c3过渡属性>

            1. transition-property:属性名,属性名;需要过渡的属性

            2. transition-duration:数值s/ms; 过渡执行时间 必须

            3. transition-delay:数值s/ms; 过渡延迟时间

            4. transition-timing-function: ease(由慢到快)/linear(匀速);过渡执行效果

   复合写法 transition: 需要过渡的属性 过渡执行时间  过渡延迟时间 过渡执行效果;

                - 没有顺序

                - 过渡执行时间是必须的 需要过渡的属性如果不写的话代表all

                - 只出现一个实际肯定是执行时间 两个时间 第一个是执行时间 第二个延迟时间

    注意点：

                1. 一般需要借助hover产生结束状态，让开始状态和结束状态之间有过渡效果

                2. 过渡加在原本元素身上鼠标滑过和离开都有缓慢效果，如果加hover只有滑过有缓慢，离开立马回到初始状态

                3. 过渡属性对颜色和数值类一般生效,对display不生效

<8..c3盒子阴影>

    box-shadow:水平偏移 垂直偏移 阴影模糊程度 [阴影大小] 阴影颜色 [阴影位置];

        - []代表可选的值

        - 水平向右为正 垂直向下为正 不偏移设置0

        - 顺序固定

        - 阴影位置默认是外面，里面设置inset

<9..c3文字阴影>

    text-shadow:水平偏移 垂直偏移 阴影模糊程度 阴影颜色;

<10..c3变形属性---2d/3d  >

       位移

                x轴位移 transform:translateX(位移值px/%)向右为正 百分数参考自己

                y轴位移 transform:translateY(位移值px/%)向下为正 百分数参考自己

               z轴位移 transform:translateZ(位移值px) 向前为正

        xy轴都位移

                transform:translateX(位移值px/%)  translateY(位移值px/%)

                transform:translate(x,y)

        xyz都位移

                transform:translate3d(x,y,z)

形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间) 要加到变形元素的父元素身上

利用定位和变形位移实现元素水平垂直居中

    div{

        position:absolute;

        top:50%;;left:50%;

        transform:translate(-50%,-50%)

    }

    优点：

        - 子元素或者父元素宽高改变可以自适应

        - 子元素不设置宽高也可识别到