# 选择器

属性选择器

属性
input[value]{
color:blue;
}

属性=值（ss）
input[type=text]{
color:yellow;
}
属性^=值 什么属性值以什么值开头
input[class^=on]{
color:#888888;
}
属性$=值 什么属性值以什么值结尾
input[class$=nj]{
color:#888888;
}
 
属性*=值 什么属性值包含*值
input[class*=n]{
color:#888888;
}

类选择器，属性选择器，伪类选择器的权重为 10

input 1 + 类选择器 10=11

# 结构伪类选择器

选择符	简介
：first-child	父元素中第一个子元素
：last-child	父元素中最后一个子元素
：nth-child (n) even 偶数 /odd 奇数	父元素中第 n 个子元素
H：first-of-type	指定类型的第一个
H：last-of-type	指定类型的最后一个
H：nth-of-type(n)	指定类型的第 N 个

：nth-child (n) 和 H：nth-of-type (n) 可以填公式：2n/2n+1/n+5/-n-5 等

区别：：nth-child (n) 先找到孩子再看看是否匹配，nth-of-type (n) 先排序再去匹配

# 伪元素

：：berfore 在元素的前面插入内容

：：after 在元素的后面插入内容

是创建一个元素但是属于行内元素，新创建的元素在文档中找不到所以说是伪元素

1
2
3

element::after
 
element::before

必须有 content 属性，和标签选择器一样权重为 1

#big {
        height: 200px;
        width: 500px;
        background-color: blue;
      }
 
      #big::after {
        content: '大家好';
        background-color: rgb(246, 211, 221);
        display: inline;
      }
 
      #big::before {
        content: '大家好';
        background-color: rgb(246, 211, 221);
        display: inline;
      }

鼠标经过遮罩显示

#big:hover::after {
      content: '';
      display: inline;
      font-family: icomoon;
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background-color: black;
    }

# 伪元素清除浮动

.f:after{
content:'';/伪元素插入必填属性
display:block;插入元素必须是块级
height:0;需要不能看见这个元素
clear:both；清楚浮动
visibility:hidden;需要不能看见这个元素
}

或者闭合法

f:before,.f:after{
content:'';
display:table;
}
.f:after{
clear:botn;
}

# CSS3 盒子模型 BOX

css3 中 box-sizing 来指定盒子模型：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 不超过盒子的宽或者高）

# 其他特性

图片变模糊：filter

1	filter:blur(50px)

数值越大越模糊

calc () 函数

1	width:calc(100%-3px)

# css3 过渡属性 transition

1 2	transition:要过渡的属性时间运动曲线啥时候开始

要过渡的属性可以是宽高颜色边框等都可以一般情况为 All

# 2D 和 3D CSS

盒子移动 transform: translate (X, Y);

1	transform: translate(50%, 100%);

百分比是相对于 x 是元素的宽的百分之 50，y 是元素的高的百分之 100（测试）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
 
      .tra {
        width: 500px;
        height: 200px;
        background-color: hotpink;
      }
 
      .tra:hover {
        transform: translate(50%, 100%);
      }
 
      .lis {
        height: 200px;
        width: 250px;
        background-color: khaki;
      }
    </style>
  </head>
 
  <body>
    <div class="tra"></div>
    <div class="lis"></div>
    <script>
      const db = document.querySelector('.tra');
      console.log(db.offsetLeft + '高宽' + db.offsetTop);
      db.addEventListener('click', () => {
        console.log(db.offsetLeft + '高宽' + db.offsetTop);
      });
    </script>
  </body>
</html>

旋转

1	transform: rotate(45deg);

放大缩小

1	transform: scale(5, 5);

# 动画 animation

@keyframes 规定动画

@keyframes name{
      0% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(1000px, 0);
      }
      50% {
        transform: translate(1000px, 500px);
      }
      75% {
        transform: translate(0, 500px);
      }
      100% {
        transform: translate(0, 0);
      }
    }

1
2
3

animation:name durtion timing-function delay iteration direction play-state 
 
fill-mode

属性	描述
animation	动画属性简写
animation-name	@keyframes 动画名称 name
animation-duration	动画时间
animation-timing-function	规定动画速度曲线
animation-delay	多长事件后动画开始执行
animation-iteration-count	动画被播放的次数，默认是 1，或者持续 infinite
animation-direction	下一周期是否逆向播放
animation-play-state	播放暂停 running/pause
animation-filll-mode	规定动画结束后保持 fowards 或回到起始 backwards

css