CSS笔记——CSS3新特性（选择器，盒子模型，过渡，模糊，计算）

本文链接：https://blog.csdn.net/Yomuki/article/details/110083027

这篇博客详细介绍了CSS3的新特性，包括新增的选择器（属性选择器、结构伪类选择器和伪元素选择器），盒子模型的使用，以及过渡效果的实现。内容涵盖属性选择器的计数方法，结构伪类选择器的文档结构应用，伪元素选择器在简化HTML结构中的作用，以及如何通过`box-sizing`调整盒子模型。此外，还提及了模糊滤镜`filter`和计算函数`calc()`作为其他值得关注的特性。

摘要由CSDN通过智能技术生成

视频地址

IE9+
移动端支持优于PC段端
应用相对广泛

一、新增选择器

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

1.1 属性选择器

[att]	所有带att属性的元素
[att="val"]	所有att属性=val的元素
[att~="val"]	适用于多个属性值的(空格分开)a val y
[att\|="val"]	适用于连字符属性值x-val-y
[att^="val"]	以val开头的属性值
[att$="val"]	以val结尾的属性值
[att*="val"]	包含val的属性值

1.2 结构伪类选择器

根据文档结构来进行选择，常用于通过父元素找儿子。

E:first-child	父元素中的第一个元素E
E:last-child	父元素中的最后一个元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:nth-last-child(n)	匹配父元素中倒数第n个子元素E
E:only-child	匹配父元素下的唯一E子元素。有且只有一个子元素。
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个
E:nth-last-of-type(n)	指定类型E的倒数第n个
E:only-of-type	选择的元素在其父元素下只有一个，但是其他类型元素可以有。

child：根据父元素下的所有儿子元素计数。当第n的元素不是E时，无效。
type：根据父元素下的所有E元素计数。
n可以是数字，关键字(even 偶数,odd 奇数)，公式（从0开始往后计算）。

2n	偶数
2n+1	奇数
5n	5的倍数
n+5	从第五个开始到最后
-n+5	前五个
an+b	a表示周期长度,b表示偏移度

1.3 伪元素选择器

伪元素选择器可以通过CSS创建一个标签元素。简化HTML结构。

E::before	放在E元素里面的前面
E::after	放在E元素里面的后面

before和after创建元素，但是属于行内元素
新创建的这个元素在文档树中找不到的，所以称为伪元素
必须具有 content属性
伪元素选择器和标签选择器一样，权重为1

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?1lv3na') format('truetype'), url('fonts/icomoon.woff?1lv3na') format('woff'), url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        div {
            position: relative;
            height: 35px;
            width: 200px;
            border: 1px solid black;
        }
        
        div::after {
            position: absolute;
            right: 3px;
            top: 50%;
            margin-top: -8px;
            font-family: icomoon;
            content: "\e91e";
        }
    </style>

<body>
    <div>

    </div>
</body>

        .box::before {
            content: "";
            position: absolute;
            display: none;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5) url('../img/arr.png') no-repeat center;
        }
        
        .box:hover::before {
            display: block;
        }

二、盒子模型

通过box-sizing来指定盒子模型。

content-box

这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

盒子大小为 width+padding+border

border-box

指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

盒子大小为width

inherit

三、其他特性（了解）

3.1 模糊filter

3.2 cacl函数

四、CSS3过渡 transition

       div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            transition: background-color .5s;
        }
        
        div:hover {
            background-color: red;
        }


            /* 单属性 */
            transition: background-color .5s;
            /* 多属性 */
            transition: background-color .5s, border .5s;
            /* 全部属性 */
            transition: all .5s;

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            position: relative;
            display: block;
            height: 55px;
            width: 55px;
            background: #ff6700;
            text-decoration: none;
            margin: 100px auto;
        }
        
        a::before,
        a::after {
            position: absolute;
            content: "";
            width: 55px;
            height: 55px;
            transition: left .3s;
        }
        
        a::before {
            left: 0;
            background: url('../img/mi-home.png') no-repeat center;
        }
        
        a::after {
            left: 55px;
            background: url('../img/mi-logo.png') no-repeat center;
        }
        
        a:hover::before {
            left: -55px;
        }
        
        a:hover::after {
            left: 0;
        }
    </style>