CSS3新增特性部分

CSS3新增特性：

2.1CSS3的现状
1.新增的CSS3特性有兼容性问题，ie9+才支持
2.移动端支持由于pc端
3.不断改进中
4.应用相对广泛
5.现阶段主要学习：新增选择器和盒子模型以及其他特性

  CSS3新增选择器

  CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
  1.属性选择器
  2.结构伪类选择器
  3.伪元素选择器

2.2属性选择器
属性选择器可以根据元素特定的属性来选择元素，这样就可以不借助于类或者id选择器
1.选择属性来选择
例子：

 input[value]{
          color:pink;
      }
      <input type="text" value="请输入用户名">
      <input type="text">

这样选择的就是必须是input但是还要具有value属性，选择这个元素。甚至还可以选择属性里面的值，例如input[type=“text”]{color:red;}重点

2.以什么开头来选择
这些都具有class这个属性，并且这个值以icon开头，想让这些文字变为红色

    div[class^=icon] {
            color: red;
        }

     <div class="icon1">小图标1</div>
     <div class="icon2">小图标2</div>
     <div class="icon3">小图标3</div>
     <div class="icon4">小图标4</div>

3.以什么结尾来选择
都有class属性，且前两个以data结尾，让前两个文字变为蓝色

   section[class$=data] {
            color: blue;
        }
        

      <section class="icon1-data">我是安其拉</section>
      <section class="icon2-data">我是哥斯拉</section>
      <section class="icon3-ico">哪我是谁</section>

  **注意：类选择器、属性选择器、伪类选择器，权重都是10。**

2.3结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于跟父级选择器里面的子元素。
选择符 简介

  E：first-child                  匹配父元素的第一个子元素E
     E: last-child                   匹配父元素中最后一个E元素
     E: nth-child(n)                 匹配元素中的第n个子元素E
     
     E: first-of-type                指定类型E的以第一个
     E: last-of-type                 指定类型E的最后一个
     E: nth-of-type(n)               指定类型E的第n个

 type类型和child类型使用起来类似
  区别
    nth-child对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后再看标签是否匹配

    nth-of-type对父元素里面指定子元素进行排序选择，然后去匹配E，再根据E找第n个孩子

   
    


 nth-child(n)选择某个父元素的一个或多个特定的子元素
 nth-child和 nth-of-type里面的n
 1.n可以是数字，关键字和公式
 2.n如果是数字，就是选择第n个子元素，n>=1;
 3.n可以是关键字:even偶数，odd奇数。
 4.n可以是公式：常见的公式如下（如果n1是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
 2n   选取偶数 等价于even
 2n+1 选取奇数 等价于odd
 5n   5 10 15...选
 n+5  从第5个开始选
 -n+5 前五个选
 
表格隔行变色可以用nth-child（even/odd）来做
 nth-child(n)重点

nth-child（n）从0开始，每次加1，往后面计算，这里面必须是n，不能是其他的字母 ，选择了所有孩子！
ol li:nth-child(n) {
        background-color: blue;
 }

2.4伪元素选择器（重点）
为元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

 注意
 1.before 和after创建一个元素，属于行内元素！！
 2.新创建的这个元素在文档树种是找不到的，所以我们称为伪元素
 3.语法:element::before{content:'';}content不能省略。
 4.before和after必须有content属性
 5.before在父元素内容的前面创建元素，after在父元素内容后面插入元素
 6.伪元素选择器和标签选择器一样，权重为1

语法:

  .weiyuansu {
            width: 150px;
            height: 60px;
            background-color: yellow;
         }
        
         .weiyuansu::before {
            content: '是的';
         }

使用场景：以后遇到字体图标的时候，可以用伪元素来做，然后利用定位定到想要的位置，再加加入字体图标的相关内容。

当鼠标经过.tudou 里面的伪元素before显示出来！

 .tudou:hover::before {
            display: block;
        }

 伪元素还可以清除浮动

2.5CSS3盒子模型
CSS3中可以通过box-sizing来指定盒子模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

  可以分成两种情况
  1.box-sizing：content-box盒子大小为width+padding+border（以前默认的）
  2.box-sizing：border-box盒子大小为width 可以使得我们padding+border就不会撑大盒子。前提padding和border不会超过width的宽度

  *{
          box-sizing：border-box；
      }

2.6CSS3其他特性（了解）
1.图片模糊
2.计算盒子宽度width：calc函数

 CSS3滤镜filter:
 filter CSS属性将模糊或颜色偏移等图形效果应用于元素
 filter:函数 例如：filter：blur（5px）; blur模糊处理 数值越大越模糊

   img {
            filter: blur(5px);
        }
        
        img:hover {
            filter: blur(0);
        }

 CSS3 calc函数
 calc（）此CSS函数让你在声明CSS属性值时执行一些计算。
 width:calc(100%-80px);
 括号里面可以有+、-、*、/来进行计算，运算符要加空格
 CSS3还增加了一些动画2D  3D等新特性。

 例：

 .fa {
            width: 400px;
            height: 200px;
            background-color: pink;
        }

     .son {
            width: calc(100% - 30px);
            height: 30px;
            background-color: purple;
        }

    子盒子永远比父盒子小30px。

2.7CSS3过渡（重点）！！
过渡（transition）是CSS3中最具颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一中样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态，渐渐过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然版本底的浏览器不支持（ie9以下版本）但是不会影响页面布局。
我们现在经常和:hover一起搭配使用。

 语法：
 谁做过渡给谁加transition
 transition：要过渡的属性 花费时间 运动曲线 何时开始；
 1.属性，想要变化的CSS属性，宽度，高度，背景颜色，内外边距都可以，如果想要所有属性都变化过渡，写一个all就可以
 2.花费时间：单位是秒（必须写单位）比如0.5s
 3.运动曲线：默认是ease（可以省略）
 4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
 例子：

 transition：all 3s;
     transition: width 3s, height 3s;