CSS属性选择器的7个常见用法！

云桃桃前端

于 2024-04-29 13:37:01 发布

阅读量964

点赞数 25

文章标签： css 前端 html5 css3 html

本文链接：https://blog.csdn.net/u013179804/article/details/138310254

版权

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

293篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。

它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。

好，那我们一起来看看它的 7 个常见用法吧。

7 个常见用法

[attribute] - 存在选择器：选择所有具有指定属性的元素，不论其属性值为何。
```
[type] {
  /* 选择所有带有 'type' 属性的元素 */
}
```

[attribute="value"] - 完全匹配选择器：选择属性值完全等于指定值的元素。

[href="https://www.example.com"]
{
  /* 选择href属性值完全等于指定URL的元素 */
}

[attribute^="value"] - 开始匹配选择器：选择属性值以指定值开始的元素。
```
[href^="https://"]
{
  /* 选择href属性值以'https://'开始的元素 */
}
```
[attribute$="value"] - 结束匹配选择器：选择属性值以指定值结束的元素。
```
[href$='.pdf'] {
  /* 选择href属性值以'.pdf'结束的元素 */
}
```
[attribute*="value"] - 包含匹配选择器：选择属性值包含指定字符串的元素。
```
[title*='hello'] {
  /* 选择title属性值包含'hello'字符串的元素 */
}
```
注意：其实这个词也不必也写完整，但如果从易读性和精准匹配来说，根据上下文写完整比较好。
[attribute~="value"] - 词匹配选择器：选择属性值中包含指定单词的元素，单词由空格分隔。
```
[class~='active'] {
  /* 选择class属性值中包含'active'单词的元素 */
}
```
[attribute|="value"] - 前缀匹配选择器：选择属性值以指定值开始或者完全等于指定值的元素，主要用于语言代码或者文档类型这样的属性。
```
[lang|='en'] {
  /* 选择lang属性值以'en'开始或等于'en'的元素 */
}
```

以上属性的，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Attribute Selectors Example</title>
    <style>
      /* 存在选择器：选择所有div带有 'data-info' 属性的元素 */
      div[data-info] {
        border: 1px solid #333;
        padding: 5px;
      }

      /* 开始匹配选择器：选择 'href' 属性值以 'https://' 开始的 <a> 元素 */
      a[href^="https://"]
      {
        color: #11cdd4;
      }
      /* 完全匹配选择器：选择 'href' 属性值完全等于指定 URL 的 <a> 元素 */
      a[href="https://www.example.com"]
      {
        color: #e02339;
      }

      /* 结束匹配选择器：选择 'href' 属性值以 '.pdf' 结束的 <a> 元素 */
      a[href$='.pdf'] {
        font-style: italic;
      }

      /* 包含匹配选择器：选择 'class' 属性值包含 'highlight' 的元素 */
      p[class*='highlight'] {
        background-color: yellow;
      }

      /* li的词匹配选择器：选择 'class' 属性值中包含 'active' 单词的元素 */
      li[class~='active'] {
        font-weight: bold;
        border-bottom: 5px solid #15be02;
      }

      /* 前缀匹配选择器：选择 'lang' 属性值以 'fr' 开始的元素 */
      [lang|='fr'] {
        border-bottom: 5px solid #665aec;
      }

      /* 额外样式：仅为了演示 */
      body {
        font-family: Arial, sans-serif;
      }
      ul {
        list-style: none;
      }
      a {
        text-decoration: none;
        margin-right: 10px;
      }
      p {
        margin: 10px 0;
      }
      /* 完全匹配选择器：选择 'type' 属性值完全等于 text 的元素 */
      input[type='text'] {
        background-color: #11cdd4;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 存在选择器 -->
    <div data-info="some data">这段文本包含 data-info 属性。</div>
    <p data-info="some data">这段文本包含 data-info 属性,但不是div。</p>

    <!-- 完全匹配选择器 -->
    <a href="https://www.example.com">Example.com</a>

    <!-- 开始匹配选择器 -->
    <a href="https://www.google.com">Google</a>
    <a href="http://www.google.com">Google (http)</a>

    <!-- 结束匹配选择器 -->
    <a href="https://www.example.com/document.pdf">PDF Document</a>

    <!-- 包含匹配选择器 -->
    <p class="some highlight text">这段文本的类名包含 'highlight'。</p>
    <div class="highlight">这段文本的类名包含 'highlight',但不是p标签，所以不起效。</div>

    <!-- 词匹配选择器 -->
    <ul>
      <li class="item active">活动项</li>
      <li class="item">非活动项</li>
      <li class="active item">另一个活动项</li>
    </ul>

    <!-- 前缀匹配选择器 -->
    <p lang="en-US">这是一段英文文本。</p>
    <p lang="en-GB">这也是一段英文文本。</p>
    <p lang="fr">这是法文文本，符合前缀匹配。</p>

    <div>
      <input type="text" name="name" placeholder="这是姓名" />
      <input type="text" name="phone" placeholder="这是电话" />
      <input type="email" name="mail" placeholder="这是邮箱" />
    </div>
  </body>
</html>

效果如下：

属性选择器的作用包括但不限于：

样式定制：根据元素的属性值为元素定制特定的样式。
状态标识：为具有特定属性值的元素添加标识性样式，如禁用状态的按钮。
动态内容：通过属性选择器选择动态生成的内容，如通过 id 或 class 属性选择由 JavaScript 添加的元素。
数据绑定：在单页面应用(SPA)中，根据数据绑定的属性为元素设置样式。

OK，本文完。

云桃桃前端

关注

25
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS属性选择器的7个常见用法！

属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。
复制链接

扫一扫