CSS3新特性-属性选择器、结构伪类选择器、伪元素选择器

CSS3新特性

ps:这些新特性都存在兼容性问题，基本都是IE9以上版本才支持
移动端支持优于PC端

新增选择器：

1.属性选择器（类选择器和属性选择器 伪类选择器权重相同）

（1）利用属性选择器可以不用借助类或id选择器

例：input [values] { ....; } //选择出input中带有values属性的

（2）属性选择器还可以选择属性等于值的某些元素（重要）

input [type=text]{ ...; } //选择处input中type值等于text的

（3）属性选择器可以选择以某属性值开头的某些元素

div[class^=icon]{....;} //选择div中具有class属性，且属性必须是icon开头的这些元素

（4）属性选择器可以选择以某属性值结尾的某些元素

div[class$=data]{....;} //选择div中具有class属性，且属性必须是data结尾的这些元素

（5）属性选择器可以选择内含某些属性值的元素

div[class*=icon]{....;} //选择div中具有class属性，且属性内含icon的这些元素

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据腹肌选择器里面的子元素
（1）E:first-child 选择元素中的第一个子元素。

div:first-child {
    background-color: var(--red);
}

（2）E:last-child 选择元素的最后一个子元素。

div:last-child {
    background-color: var(--red);
}

（3）:nth-child(n) 定位某个父元素的一个或多个特定的子元素。其中 n 是其参数。（会把所有的孩子都标注序号）n 取值如下：

• 整数值(1 || 2 || 3 || 4 || …)
  参数n的起始值为1，不是0,若要选中第一个元素nth-child(1)。

• 表达式(2n+1 || -n+5（前五个，包括第五个） || …)
  为表达式时，n从0开始，表达式的值为0或小于0的时，不选择任何匹配的元素。

• 关键词(odd || even)
  odd 和 even 是可用于匹配下标是奇数(odd)或偶数(even)的子元素的关键词（第一个子素的下标是 1）。

div:nth-child(2n) {
    background-color: var(--red);
}

• E:first-of-type
  指定元素E的第一个

• E:last-of-type
  指定元素E的最后一个

• E:nth-of-type(n)选择器
  指定类型E的第n个

3.伪元素选择器（重点）
伪元素选择器可以帮助我们CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
语法：

element :: before/after {  样式； }

before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器权重相同
例：

.tudou::before{
content :'';
/*隐藏遮罩层*/
display:none;
position:absolute;
top :0;
left:0;
width:100%;
height:100%;
backgroung:rgba(0,0,0,0.4) url(images/arr.png) no-repeat ccenter;
}

/*当鼠标经过土豆这个盒子，就让里面的before遮罩层显示出来*/
.tudou:hover::before{
/*显示元素*/
display:block;
}

应用：伪元素清除浮动（前面学过）

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box,border-box，这样我们计算盒子大小的方式就发生了改变。
可分为两种情况：
1.box-sizing：content-box盒子大小为 widtn+padding+border（以前默认的）
2.box-sizing：border-box盒子大小为width（此法中padding和border就不会撑大盒子）（常用）

CSS3图片模糊

img{
filter:blur(15px);  //blur是一个函数，数值越大，图片越模糊，数值要带单位
}

CSS3 calc函数

calc()函数可在声明CSS属性时执行一些计算

width: calc(100%-80px); //宽度比父盒子少80px

CSS3 过渡效果

过渡是一个简单的动画，是一个状态慢慢地过渡到另一个状态
经常与：hover一起搭配使用

transition: 要过渡的属性  花费时间  运动曲线  何时开始

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

//盒子宽高变化案例
 div {
        width: 200px;
        height: 100px;
        background-color: rgb(106, 142, 197);
        transition: width 1s，height 2s;
      }

      div:hover {
        width: 400px;
        height:600px;
      }

//进度条案例
.bar {
        width: 450px;
        height: 150px;
        border: 1px solid red;
        border-radius: 7px;
        padding: 1px;
      }

      .bar_in {
        width: 50%;
        height: 100%;
        background-color: red;
        transition: width 1s;
      }
      .bar:hover .bar_in {
        width: 100%;
      }

    <!-- 进度条 -->
    <div class="bar">
      <div class="bar_in"></div>
    </div>