古之立大事者,不惟有超世之才,亦必有坚忍不拔之志。——苏轼
写在前面
上一篇博客 基本选择器一 中我们介绍了 基本选择器中一些比较简单的用法,例如类型选择器、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 属性选择器可能会更快速的定位到某个元素。