CSS3新增–笔记来自B站黑马前端Pink老师学习视频

一、属性选择器

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

<title>CSS3新增属性选择器</title>
    <style>
        /* 必须是 input 但是同时具有 value这个属性 */
        input[value] {
            color: pink;
        }

        /* 只选择 type=text 的input 选取出来 */
        input[type=text] {
            color: pink;
        }

        /* 选出class的值是以icon开头的元素 */
        div[class^=icon] {
            color: red;
        }

        /* class的值是以data结尾的元素 */
        section[class$=data] {
            color: blue;
        }

        /* class值中含有cd的元素 */
        div[class*=cd] {
            color: coral;
        }

        /* 类选择器和属性选择器 伪类选择器 权重都是10 */
    </style>

二、结构伪类选择器

1.nth-child选择器

<title>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul 里面的第一个孩子 */
        ul li:first-child {
            background-color: pink;
        }
        /* 2.选择ul 里面的最后一个孩子 */
        ul li:last-child {
            background-color: pink;
        }
        /* 3.选择ul 里面的第2个孩子 */
        ul li:nth-child(2) {
            background-color: skyblue;
        }
        /* 选择ul 里面的第6个孩子 */
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>

<title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: green;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里必须是n 不能是其他字母 选择了所有孩子 */
        ol li:nth-child(n) {
            background-color: pink;
        } 
        /* 4.nth-child(2n) 选择了所有偶数孩子 等价于 even */
        ol li:nth-child(2n) {
            background-color: pink;
        } 
        /* 5.nth-child(2n+1) n从0开始 选择了所有奇数孩子 等价于 odd */
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } 
        /* 6. 从第5个开始*/
        ol li:nth-child(n+5) {
            background-color: skyblue;
        } 
        /* 7. 前5个 */
        ol li:nth-child(-n+5) {
            background-color: skyblue;
        }
    </style>

2.nth-of-type选择器

<title>CSS3新增nth-of-type选择器</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
    </style>

3.nth-child和nth-of-type的区别

<title>CSS3新增nth-of-type选择器</title>
    <style>
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看 nth-child(1) 之后回去看 前面的div*/
        /* 所以这里第一个标签是p, 不是div，不符合，谁也没选出来 */
        section div:nth-child(1) {
            background-color: red;
        }
        /* nth-of-type 会把指定元素的盒子排列序号*/
        /* 执行的时候首先看 div指定的元素 之后回去看 nth-of-type(1) 括号里是几就是第几*/
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>

三、伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

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

        /* 伪元素选择器before和after的权重都为1 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* 新创建的这些元素在文档树中是找不到的，所以我们称为伪元素 */
        div::before {
            /* 这个content是必须要写的 */
            content: '我';
        }
        div::after {
            /* 这个content是必须要写的 */
            content: 'cy';
        }

四、盒子模型border-box

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的前提下）

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}

五、模糊处理

img {
     /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
     filter: blur(2px);
}

六、计算盒子宽度calc函数

<title>css3宽度calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        /* 需求我们的盒子宽度永远比父盒子小30像素 */
        .son {
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求我们的盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

七、属性过渡（重点）

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

1.要过渡的属性：需要变化的CSS属性，宽度高度 背景颜色 内外边距等，如果需要所有的属性都变化过渡，写一个all就可以
2.花费时间：单位是 秒（必须写单位）比如 0.5s
3.运动曲线：默认是 ease（可以省略）

4.何时开始：单位是 秒 s（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

属性过渡的使用口诀：谁做过渡给谁加！

/* transition: 变化的属性 花费时间 运动曲线 何时开始;*/
   transition: width 1s ease 1s;