CSS进阶知识：CSS3新增选择器----属性选择器详解

本文链接：https://blog.csdn.net/zxn275266/article/details/136260543

本文详细介绍了CSS属性选择器的用法，包括匹配具有特定属性、属性值等于、以、尾部和包含的元素，通过HTML示例展示了如何在实际项目中运用这些选择器。还提到了类选择器、伪类选择器的权重概念。

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

1.属性选择器

选择符	描述
元素[att]	选择具有 att 属性的元素
元素[att="value"]	选择具有 att 属性且属性值等于 value 的元素
元素[att^="value"]	匹配具有 att 属性且值以 val 开头的元素
元素[att$="value"]	匹配具有 att 属性且值以 val 结尾的元素
元素[att*="value"]	匹配具有 att 属性且值中含有 val 的元素

2.案例演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 必须是input同时具有value这个属性 */
    input[value] {
      color: red;
    }
    /* 只选择type=password的文本框出来 */
    input[type="password"] {
      background-color: green;
    }
    /* 选择具有icon开头的class属性的div */
    div[class^="icon"] {
      color: blue;
    }
    /* 选择具有data结尾的class属性的section */
    section[class$="data"] {
      color: purple;
    }
  </style>
  <body>
    <!-- 1.属性选择器的使用 -->
    <input type="text" value="请输入文字" />
    <input type="text" />
    <br />
    <!-- 2.选择属性=值的某个元素 -->
    <input type="text" name="" />
    <input type="password" />
    <br />
    <!-- 3.利用属性选择器可以选择属性值开头的某个元素 -->
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="icon4">图标4</div>
    <div class="icon5">图标5</div>
    <section class="1data">我是1data</section>
    <section class="2data">我是2data</section>
    <section class="3data">我是3data</section>
  </body>
</html>