Web前端学习笔记1（音频属性，新表单属性，新input属性，属性选择器，结构伪类选择器）

最新推荐文章于 2024-11-03 20:03:09 发布

rootting

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量97

点赞数

分类专栏： web前端文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_60531106/article/details/125493589

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML中的音频标签以及CSS3的新特性——属性选择器和结构伪类选择器的使用方法。通过实例展示了如何使用属性选择器选取特定属性值、属性值开头或结尾的元素，以及如何利用结构伪类选择器选取文档结构中的第一个子元素、最后一个子元素、偶数项或奇数项。内容涵盖了网页开发中常见的HTML和CSS用法，对于前端开发者来说是一份实用的参考资料。

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

音频：

大部分浏览器都支持MP3格式

因此可以采用以下代码来写

音频的常见属性

HTML新的表单属性

HTML新的input类型

CSS3新特性--属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input[value] {
            color: red;
        } */
        input[type=text] {
            color: pink;
        }
        /* 选择首先div，然后具有class属性 并且属性值必须是icon开头的这些元素 */
        /* div标签选择器权重1，属性选择器10，总共11 */
        div[class^=icon] {
            color: rebeccapurple;
        }
        /* 类选择器10，所以不起作用 */
        /* 可以添加个div, */
        /* div .icon */
        .icon{
            color: #fff;
        }
        section[class$=data] {
            color: blue;
        }
        section[class*=icon] {
            color: aqua;
        }
        /* 类选择器，属性选择器，伪类选择器，权重都为10 */
    </style>
</head>
<body>
    <!-- 1、利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2、属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3、属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">aaa</section>
    <section class="icon2-data">bbb</section>
    <!-- 5、属性选择器可以选择含有属性值的某些元素 -->
    <section class="icon3-ico">ccc</section>
</body>
</html>

结构伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* <!-- 选择ul里面的第一个孩子 --> */
        ul li:first-child{
            background-color: red;
        }
         /* <!-- 选择ul里面的最后一个孩子 --> */
        ul li:last-child{
        background-color: red;
        }
        /* 3、选择ul里的第二个孩子 */
        ul li:nth-child(2){
            background-color: red;
        }
    </style>
    
    
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择所有偶数的 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        /* 选择所有奇数的 */
        ul li:nth-child(odd) {
        background-color: gray;
        }
        /* 3、nth-child(n),从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 */
        /* 第0个和超出部分的孩子会自动忽略 */
        /* 指选择所有的孩子 */
        ol li:nth-child(n) {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</body>
</html>