迈进前端(05) CSS 选择器之基本选择器二(属性选择器)

最新推荐文章于 2022-07-31 15:57:22 发布

一碗周.

最新推荐文章于 2022-07-31 15:57:22 发布

阅读量243

点赞数

文章标签： html css css3 html5 javascript

本文链接：https://blog.csdn.net/weixin_46163658/article/details/109350414

版权

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼

写在前面

上一篇博客基本选择器一中我们介绍了基本选择器中一些比较简单的用法，例如类型选择器、ID选择器、通配符选择器等。这篇博客来学习基本选择器中比较难的一种——属性选择器

属性选择器概述

属性选择器是通过 HTML 元素已经存在属性名或属性值来定位具体 HTML 元素，在官方文档中类选择器和 ID 选择器都属于属性选择器，因为本质上类选择器是 HTML 元素中 class 的属性值，ID 选择器是 HTML 元素中 id 的属性值。

CSS 中的属性选择器还可以分为两种，如下所示

属性值直接匹配选择器
属性值正则匹配选择器

接下来我们将分别讨论这两类属性选择器

属性值直接匹配选择器

属性值直接匹配选择器还可以分为4种，如下所示：

[attr]: 表示属性名匹配
[attr= "value"]：表示键值对匹配
[attr~="value"]：表示是属性值单词完全匹配选择器，专门用来匹配属性中的单词，其中，～=用来连接属性和属性值。
[attr|="value"]: 表示属性值起始片段完全匹配选择器，表示具有 attr 属性的元素，其值要么正好是 value ，要么以 value 外加短横线-（U+002D）开头，|= 用于连接需要匹配的属性和属性内容。

`[attr]` 属性选择器

[attr] 属性选择器是众多属性选择器中的最简单用法，其中 attr 表示的是 HTML 元素的属性名。[attr] 属性选择器是通过 HTML 元素的 attr 属性名来定位一个或多个 HTML 元素，而不关注该属性的值是什么。

语法结构如下所示

[attr] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
    [id] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 id="title1">白月初</h1>
  <h1 id="title2">东方月初</h1>
  <h1 id="title3">涂山苏苏</h1>
  <h1 id="title4">涂山红红</h1>
  <h1 id="title5">王权富贵</h1>
  <h1 id="title6">王富贵</h1>
</body>
</html>

执行结果如下图所示

`[attr=value]` 属性选择器

[attr=value] 属性选择器是通过 HTML 元素的 attr 属性名属性值为 value 来定位一个或多个 HTML 元素。

语法结构如下所示

[attr=value] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
    [id=title1] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 id="title1">白月初</h1>
  <h1 id="title2">东方月初</h1>
  <h1 id="title3">涂山苏苏</h1>
  <h1 id="title4">涂山红红</h1>
  <h1 id="title5">王权富贵</h1>
  <h1 id="title6">王富贵</h1>
</body>
</html>

执行结果如下所示

`[attr~=value]` 属性选择器

[attr~=value] 属性选择器是通过 HTML 元素的 attr 属性名，属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一，来定位一个或多个 HTML 元素。

语法结构如下所示·

[attr~=value] {
	属性 : 属性值;
}

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
    [class ~= type3] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 class="name1 type1" id="title1">白月初</h1>
  <h1 class="name2 type2" id="title2">东方月初</h1>
  <h1 class="name3 type3" id="title3">涂山苏苏</h1>
  <h1 class="name4 type4" id="title4">涂山红红</h1>
  <h1 class="name5 type5" id="title5">王权富贵</h1>
  <h1 class="name6 type6" id="title6">王富贵</h1>
</body>
</html>

执行效果如下所示

`[attr|=value]` 属性选择器

[attr|=value] 属性选择器通过 HTML 元素的 attr 属性名并且属性值为 value 或者以 value- 为前缀来定位一个或多个 HTML 元素。

语法结构如下所示

[attr|=value] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>

  <style>
    /* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
    [class |="name"] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 class="name-1 caption1" id="title1">白月初</h1>
  <h1 class="name2 caption2" id="title2">东方月初</h1>
  <h1 class="name-3 caption3" id="title3">涂山苏苏</h1>
  <h1 class="name4 caption4" id="title4">涂山红红</h1>
  <h1 class="name-5 caption5" id="title5">王权富贵</h1>
  <h1 class="name" id="title6">王富贵</h1>
</body>
</html>

执行结果如下图所示

属性值正则匹配选择器

属性值正则匹配选择器还可以分为3种，如下所示：

[attr^=val] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。
[attr$=val] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。
[attr*=val] 属性选择器：通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。

`[attr^=value]` 属性选择器

[attr^=value] 属性选择器通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位一个或多个 HTML 元素。

语法结构如下所示：

[attr^=value] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>

  <style>
    /* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
    [class ^="name"] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 class="caption1" id="title1">白月初</h1>
  <h1 class="name2 caption2" id="title2">东方月初</h1>
  <h1 class="caption3" id="title3">涂山苏苏</h1>
  <h1 class="name4 caption4" id="title4">涂山红红</h1>
  <h1 class="caption5" id="title5">王权富贵</h1>
  <h1 class="name" id="title6">王富贵</h1>
</body>
</html>

执行结果如下

博客大纲如下

基本选择器概述

CSS 的基本选择器是选择器所有种类中最为基础的用法，基本选择器共有 5 种具体用法，如下：

`[attr$=value]` 属性选择器

[attr$=value] 属性选择器通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位一个或多个 HTML 元素。

语法结构如下所示：

[attr$=value] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>

  <style>
    [class $="name"] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 class="name caption" id="title1">白月初</h1>
  <h1 class="name" id="title2">东方月初</h1>
  <h1 class="name caption" id="title3">涂山苏苏</h1>
  <h1 class="name" id="title4">涂山红红</h1>
  <h1 class="name caption" id="title5">王权富贵</h1>
  <h1 class="name" id="title6">王富贵</h1>
</body>
</html>

执行结果如下

`[attr*=value]` 属性选择器

[attr*=value] 属性选择器通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位一个或多个 HTML 元素。

语法结构如下所示

[attr*=value] {
	属性 : 属性值;
}

示例代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>

  <style>
    [class *="caption"] {
      color: cornflowerblue;
    }
  </style>
</head>
<body>
  <h1 class="name caption" id="title1">白月初</h1>
  <h1 class="name" id="title2">东方月初</h1>
  <h1 class="name caption" id="title3">涂山苏苏</h1>
  <h1 class="name" id="title4">涂山红红</h1>
  <h1 class="name caption" id="title5">王权富贵</h1>
  <h1 class="name" id="title6">王富贵</h1>
</body>
</html>

执行结果如下所示

写在最后

CSS 属性选择器是基本选择器中最复杂的一个，也是最不常用的一个，如果利用好 CSS 属性选择器可能会更快速的定位到某个元素。

一碗周.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
迈进前端(05) CSS 选择器之基本选择器二(属性选择器)

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼写在前面上一篇博客基本选择器一中我们介绍了基本选择器中一些比较简单的用法，例如类型选择器、ID选择器、通配符选择器等。这篇博客来学习基本选择器中比较难的一种——属性选择器属性选择器概述属性选择器是通过 HTML 元素已经存在属性名或属性值来定位具体 HTML 元素，在官方文档中类选择器和 ID 选择器都属于属性选择器，因为本质上类选择器是 HTML 元素中 class 的属性值，ID 选择器是 HTML 元素中 id 的属性值。C.
复制链接

扫一扫