2020-10-19前端学习笔记 - CSS3的新特性

喜欢ヅ旅行 2022-12-16 09:26 96阅读 0赞

# CSS3的新特性 #

### 属性选择器 ###

> 属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器了

<table> 
 <thead> 
  <tr> 
   <th>选择符</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E[attr]</td> 
   <td>选择具有attr属性的E元素</td> 
  </tr> 
  <tr> 
   <td>E[attr=‘val’]</td> 
   <td>选择具有attr属性且属性值等于val的E元素</td> 
  </tr> 
  <tr> 
   <td>E[attr^=‘val’]</td> 
   <td>匹配具有attr属性且属性值以val开头的E元素</td> 
  </tr> 
  <tr> 
   <td>E[attr$=‘val’]</td> 
   <td>匹配具有attr的属性且属性值以val结尾的E元素</td> 
  </tr> 
  <tr> 
   <td>E[attr*=‘val’]</td> 
   <td>匹配具有attr属性且属性值中包含val的E元素</td> 
  </tr> 
 </tbody> 
</table>

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

### 结构伪类选择器 ###

> 结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素

<table> 
 <thead> 
  <tr> 
   <th>选择符</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E:first-child</td> 
   <td>匹配父元素中第一个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:las-child</td> 
   <td>匹配父元素中最后个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:nth-child(n)</td> 
   <td>匹配父元素中第n个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:first-of-type</td> 
   <td>指定类型E的第一个</td> 
  </tr> 
  <tr> 
   <td>E:last-of-type</td> 
   <td>指定类型E的最后一个</td> 
  </tr> 
  <tr> 
   <td>E:nth-of-type(n）</td> 
   <td>指定类型E的第n个)</td> 
  </tr> 
 </tbody> 
</table>

> nth-child(n) 选择某个父元素的一个或多个特定的子元素

*  n 可以是数字、关键字和公式
    
     *  n如果是数字，就是选择第n个子元素，里面的数字从1开始
     *  n可以是关键字，如nth-child(even)/nth-child(odd)则是获取偶数行或奇数行
     *  n可以是公式， 如nth-child(n):注意这里的字母必须用n不能用其它字母，n从0开始每次加1，往后面计算（第0个元素或超出了元素的个数会被忽略），相当于选择了所有子元素
     *  常用的公式如下：
        
        <table> 
         <thead> 
          <tr> 
           <th>取值</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>偶数</td> 
          </tr> 
          <tr> 
           <td>+ 1</td> 
          </tr> 
          <tr> 
           <td>5 10 15 …5的倍数</td> 
          </tr> 
          <tr> 
           <td>5</td> 
          </tr> 
          <tr> 
           <td>+5</td> 
          </tr> 
         </tbody> 
        </table>

### nth-child 与nth-of-type去别 ###

*  nth-child：会把所有的盒子都排列序号（不管是不是同一类元素），在执行的时候先看nth-child(n)，然后再去看前面的标签名称
 *  nth-of-type：会把指定的元素排列序号，在执行的时候首先看指定的元素，然后再去看nth-of-type(n)第几个孩子。

### 伪元素选择器 ###

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

*  before和after创建一个元素，但是属于行内元素
 *  新创建的这个元素在文档树中是找不到的，所以称为伪元素
 *  语法： element::before\{\}
 *  before 和after必须有content属性
 *  before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
 *  伪元素选择器和标签 选择器一样权重为1

> 伪元素使用场景：
> 
>  *  配合字体图标，例如在文本框后面增加一个下拉小三角
>  *  鼠标悬浮盒子上出现遮盖层
>  *  利用伪元素清除浮动

### 盒子模型 ###

> CSS3中可以通过box-sizing来指定盒子模型，有2个值：content-box、border-box，这样计算盒子大小的方式就发生了改变  
> 可以分为以下两种情况
> 
> 1.  box-sizing: content-box盒子大小为：width + padding + border(以前默认的)
> 2.  box-sizing: border-box 盒子大小为width  
>     **如果盒子模型改为了box-sizing:border-box 那么padding和border就不会撑大盒子了，前提是padding和border不能超过width**

### CSS3 滤镜filter ###

> filter css属性将模糊或颜色便宜等图形效果应用于元素  
> 用法：filter:函数(); 例如：filter:blur(5px); blur模糊处理，数值越大越模糊

### CSS3过渡（重点） ###

> 过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态  
> 可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持，但不会影响页面布局

> transition：要过渡的属性 花费时间 运动曲线 何时开始
> 
>  *  **属性**：想要变换的css属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
>  *  **花费时间**：单位是秒（必须写单位） 如0.5s
>  *  **运动曲线**：默认是ease（可以省略）
>  *  **何时开始**：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）  
>     过渡口诀：谁过渡给谁加，如果要写多个属性用逗号分隔或用all也可以

过渡案例：实现进度条效果

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .bar { 
                width: 150px;
                height: 15px;
                border: 1px solid red;
                border-radius: 7px;
                padding: 1px;
            }
    
            .bar_in { 
                width: 50%;
                height: 100%;
                background-color: red;
                border-radius: 7px;
                transition: all .7s;
            }
    
            .bar:hover .bar_in { 
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="bar">
            <div class="bar_in"></div>
        </div>
    </body>
    
    </html>