css3 - 属性选择器

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>
        /* 【1】选择具有某个属性的元素*/
        /*选中具有value属性的input标签 */
        input[value] {
            color: red;
        }

        a[title] {
            color: green;
        }

        /* 【2】选择具有某个属性且值为xx的元素 */
        input[type=button] {
            background-color: pink;
        }

        /* 【3】选择具有某个属性且值是以xx开头的元素 */
        div[class^=box] {
            color: blue;
        }

        /* 【4】选择具有某个属性且值是以xx结尾的元素 */
        p[class$=-hd] {
            color: red;
        }

        /* 【5】选择具有某个属性且值包含xx的元素 */
        section[class*=icon] {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 属性选择器:根据标签的属性,来选中元素。 -->
    <input type="text">
    <input type="text" value="">
    <hr>
    <a href="#">测试</a>
    <a href="#" title="百度一下">百度</a>
    <hr>
    <input type="submit">
    <input type="button">
    <hr>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="abc">4</div>
    <hr>
    <p class="box-hd">我是p1</p>
    <p class="bd">我是p2</p>
    <p class="hezi-hd">我是p3</p>
    <hr>
    <section class="icon01">s1</section>
    <section class="box-icon">s2</section>
    <section class="aliamma-icon-box">s3</section>
</body>
</html>
相关推荐
陈龙龙的陈龙龙3 分钟前
macOS 安装 Homebrew、nvm 及安装切换 node 版本
前端·macos·bash
asphyxia6 分钟前
老龄化项目问题解决
前端
SaebaRyo8 分钟前
作为一个前端er如何了解LLM(大语言模型)
前端·llm
悬炫8 分钟前
深入解析浏览器渲染原理与性能优化策略
前端·javascript
鸡血园地8 分钟前
前端性能优化
前端
谦谦橘子11 分钟前
rxjs原理解析
前端·javascript·函数式编程
竺梓君12 分钟前
移动端开发常见问题及解决方案
前端·javascript
ruijia16814 分钟前
cookie的domin path
前端
前端开发张小七14 分钟前
Python3 函数详解:从基础到高级
前端
景淮ZaiT16 分钟前
解决VS Code中Tailwind CSS的黄线警告
前端