正确使用 CSS 属性选择器，你经常忽略的细节~

最新推荐文章于 2025-02-11 11:07:28 发布

前端小目标

最新推荐文章于 2025-02-11 11:07:28 发布

阅读量687

点赞数 13

分类专栏： # CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_30094821/article/details/137755549

版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了CSS属性选择器的概念、使用场景及示例，展示了如何根据元素的属性及其值精细地应用样式，提升代码的简洁性和复用性。

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

1. 基础知识

什么是 CSS 属性选择器

CSS 属性选择器是一种在样式表中用于选择具有特定属性或属性值的 HTML 元素的方法。

通过属性选择器，我们可以根据元素的属性及其值来应用样式，而无需改变 HTML 结构。

为何要使用 CSS 属性选择器

使用属性选择器可以让我们的样式定义更加精细和灵活。

它允许我们针对具有特定特征的元素应用样式，而不是依赖类或者 ID，这样可以减少 HTML 的类和 ID 的使用，使得结构更为简洁，同时也提高了样式的可复用性。

如何使用 CSS 属性选择器

CSS 属性选择器的基本语法是在方括号中包含属性名，可选地跟上等于号和属性值。

[attribute] 选择包含指定属性的所有元素。

[attribute="value"] 选择属性值完全匹配指定值的所有元素。

[attribute~="value"] 选择属性值中包含指定词汇的所有元素。

[attribute|="value"] 选择属性值完全等于“value”或者以“value-”开头的所有元素。

[attribute^="value"] 选择属性值以指定值开头的所有元素。

[attribute$="value"] 选择属性值以指定值结尾的所有元素。

[attribute*="value"] 选择属性值中包含指定字符的所有元素。

适用场景

针对特定类型的输入框应用样式，比如 type="text"。
标记和美化带有特定数据属性的元素。
为具有特定属性值的链接设置图标，例如下载链接。
针对表单中必填字段应用特殊样式。

2. 示例演示

以下是一个使用 CSS 属性选择器来为不同类型的输入框应用不同样式的简单示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器示例</title>
  <style>
    input[type="text"] {
      border: 2px solid blue;
    }

    input[type="password"] {
      border: 2px solid red;
    }

    input[type="submit"] {
      background-color: green;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
</style>
</head>

<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br><br>
    <input type="submit" value="登录">
  </form>
</body>

</html>

在这个示例中，文本输入框拥有蓝色边框，密码输入框拥有红色边框，而提交按钮则有绿色背景和白色文字。