CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

CSS3选择器

   ·*通配选择器

   ·E标签选择器

   ·E#id ID选择器

   ·E.class类选择器

  ·Ｅ　Ｆ包含选择器，后代选择器

  ·Ｅ＞Ｆ子包含选择器

  ·Ｅ＋Ｆ相邻兄弟选择器

  ·Ｅ【ｆｏｏ】属性选择器

  ·并集选择器

属性选择器

E[att] { sRules }:选择具有att属性的E元素。

E[att="val"] { sRules }:选择具有att属性且属性值等于val的E元素。

E[att~="val"] { sRules }:选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

E[att^="val"] { sRules }:选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] { sRules }:选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"] { sRules }:选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"] { sRules }:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

 img**[alt$="3"]**{

            margin: 20px;

        }

` div**[class~="a"]**

        {

          border: 2px solid red;

        }

CSS3结构伪类选择器

-----------

    E：nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素

    E:nth-last-child(n) { sRules }:匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

    E:nth-of-type(n) { sRules }:匹配同类型中的第n个同级兄弟元素E。

    E:first-child { sRules }:匹配父元素的第一个子元素E。

    E:last-child { sRules }:匹配父元素的最后一个子元素E。

```示例代码：

        li:nth-child(4n){

            color: red;

        }

        li:nth-last-child(2){

            color: blue;

        }

        p:nth-of-type(2){

            color: orange;

        }

        p:nth-last-child(2){

            color: yellow;

CSS3UI状态伪类选择器

 E：emabled:匹配用户界面上处于可用状态的元素E。

 E:disabled:匹配用户界面上处于禁用状态的元素E。

 E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

CSS3其他选择器

E~F

E：not(s)

        input:checked > span{

            color: red;

        }

        input[type="text"]:enabled{

            border: 2px solid blueviolet;

            background-color: yellow;

            color: aqua;

        }

        input[type="text"]:disabled{

            border: 2px solid blueviolet;

            background-color: yellow;

            color: aqua;

        }

CSS3属性前缀

chrome、Safar:-webkit-

Opera:-o-

Firefox:-moz-

Internet Explorer:-ms-

            background-color: orange;

            /*针对谷歌和苹果浏览器*/

            -webkit-border-radius: 50px;

            /*针对欧朋浏览器*/

            -o-border-radius:20px;

            /*针对火狐浏览器*/

            -moz-border-radius:20px ;

            /*针对IE浏览器*/

            -ms-border-radius:50px;

**CSS长度单位**

=======

    EM:与元素字号挂钩

    Rem:与根元素的字号挂钩

    Px:像素、与分辨率挂钩

    %：

    注意：CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

    我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。

    而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。

    默认挂钩元素为父元素。

    网页默认字号大小为16px

    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

       任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

    EM特点

         1. em的值并不是固定的；

         2. em会继承父级元素的字体大小。

       px：为像素单位。它是显示屏上显示的每一个小点，为显示的               最小单位。它是一个绝对尺寸单位；

       em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；

       %： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。

      这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。

CSS3过渡效果一般是通过一些简单的CSS动作出发平滑过渡功能,比如hover,focus,active,checked等

=============================================================

    CSS3通过transition属性完成过渡效果

    transition-property:指定过渡使用的CSS属性

    transition-duration:完成过渡的时间

    transition-timing-function:指定过渡的函数

    transition-delat:指定过渡开始出现的延迟时间

    transform:属性值为变形函数

    translate/translateX/translateY:在水平、垂直或者两个方向上平移元素

    scale/scaleX/scaleY:在水平、垂直或两个方向上缩放元素

    romate:旋转元素，单位deg

    skew/skewX/skewY:使元素倾斜一定的角度

    Transform-origion:指定变形的起点-left

    top

       方位词：-top/bottom/center/left/right

CSS动画

-----

    @keyframes:定义一个动画

    animation:在HTML元素上应用动画-->

    **定义动画**

    @keyframes 动画名称{

       阶段1{CSS样式}

       阶段2{CSS样式}

       阶段3{CSS样式}

       ..... }

       阶段：每个阶段用百分比表示，从0%到100%

       起止必须设置即0%和100%或者from和to-->

       animation-name:动画名称    ***必须指定

       animation-Duration:动画持续时间   ***必须指定

       animation-timing-function:动画速度曲线

       animation-delay:动画开始的时间，延迟

       animation-iteration-count:动画播放次数，默认为1.

               N：播放次数。

               infinite:无限次循环。

       animation-direction:动画在下一个是否逆向播放，默认为normal.

          reverse：反方向运行

          alternate：动画先正常运行再反方向运行，并持续交替运行

          alternate-reverse：动画先反运行再正方向运行，并持续交替运行

       animation-play-state：running：运动 paused： 暂停

       animation-fill-mode:规定对象动画时间之外的状态

              none:不改变默认行为

              forwards:在动画完成后，保持最后的CSS样式

              backwards:在动画完成后，回到最初的CSS样式

              both:向前和向后填充的样式都被应用-->

```示例代码：

 img{

            width: 150px;

            animation: plane 5s ease-in-out infinite ;

        }

        @keyframes plane{

            0%{

                transform: translate(0,0);

            }

            20%{

                transform: translate(100px,200px);

            }

            40%{

                transform: translate(200px,300px);

            }

            60%{

                transform: translate(300px,200px);

            }

            100%{

                transform: translate(500px,500px);

            }

        }

巴特西

CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

CSS3选择器

属性选择器

CSS3UI状态伪类选择器

CSS3属性前缀

最新文章

热门文章