H5与CSS3新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40996739/article/details/108774439

本文介绍了HTML5中新增的语义标签、多媒体标签（video和audio）、表单属性以及CSS3的新特性，如属性选择器、结构伪类选择器、伪元素、border-box模型、filter效果和css动画。重点讲解了nth-child的选择器执行顺序，以及如何利用before和after创建伪元素。同时提到了box-sizing属性改变盒模型，以及filter中blur和opacity函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x00 h5新增语义标签

ie中需要将其转换为块元素

0x01 H5新增多媒体标签

video标签

audio

0x02 h5新增表单属性

input

0x03 css3新增特性

属性选择器，可以根据属性选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <input type="text" value="请输入">
        <input type="text">
    </div>
</body>
<style>
    input[value] {
        background-color: aqua;
    }
</style>
</html>

结构伪类选择器

nth-child括号中可以输入公式或者关键字，even为偶数，odd为奇数

nth-child的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <p>p1</p>
        <div>div1</div>
        <div>div2</div>
    </div>
</body>
<style>
    /*这里是先执行nth-child(1)这个代码，先找到第一个子元素，然后回去看nth-child代码前的div，发现不匹配，所以这里的bgc没有生效*/
    .box div:nth-child(1) {
        background-color: aqua;
    }
</style>
</html>

可以看到并没有生效，这是因为这里是先执行nth-child(1)这个代码，给所有元素指定序号，然后先找到第一个子元素，然后回去看nth-child代码前的div，发现不匹配，所以这里的bgc没有生效。如果想生效可以使用nth-of-type（），给指定元素指定序号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <p>p1</p>
        <div>div1</div>
        <div>div2</div>
    </div>
</body>
<style>
    /*这里是先执行nth-child(1)这个代码，先找到第一个子元素，然后回去看nth-child代码前的div，发现不匹配，所以这里的bgc没有生效*/
    /*.box div:nth-child(1) {*/
    /*    background-color: aqua;*/
    /*}*/
    /*需要执行上面的代码的话可以使用nth-of-type()*/
    .box div:nth-of-type(1) {
        background-color: aqua;
    }
</style>
</html>

可以看到成功生效

0x04 伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <p>p1</p>
    </div>
</body>
<style>
    .box::before {
        content: 'before';
    }
    .box::after {
        content: 'after';
    }
</style>
</html>

before和after创建一个行内元素，新创建的这个元素在文档树中是找不到的，所以称为伪元素。

伪元素权重和标签选择器一样

实例，利用before生成遮罩层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <img src="test.jpg">
    </div>
</body>
<style>
    .box {
        width: 541px;
        height: 300px;
        position: relative;
    }
    .box::before {
        content: '';
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 541px;
        height: 300px;
        background-color: rgba(0,0,0,0.2);
    }
    .box:hover::before {
        display: block;
    }
</style>
</html>

0x05 border-box

css3新增盒子属性，通过设置box-sizing：border-box即可设置（默认为content-box）

设置了这个属性后设置width就是直接设置盒子大小，改变margin padding等不会改变总盒子的大小

0x06 filter

详细信息参考mdn文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

这里标注一下blur和opaticy函数，blur（）函数为高斯模糊，数值越大越模糊

opaticy（）函数则是透明度

0x07 css动画

transition属性

切记，谁变化就给谁设置transition属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
    </div>
</body>
<style>
    .box {
        width: 300px;
        height: 200px;
        background-color: aqua;
        transition: height .5s, width .5s;
    }
    .box:hover {
        height: 300px;
        width: 400px;
    }
</style>
</html>

css查漏补缺day06