书接上文,上回书咱们知道了 CSS 选择器能做什么,主要是选择器定位 HTML 元素的三种情况,以及选择器分成了五类。好吧!接下来,咱们就一类一类的来学习吧。
首先,咱们来学习基本选择器。基本选择器是 CSS 所有选择器中最简单,也是最常用的选择器。基本选择器一共有 5 个具体用法:
- 类型选择器:也可以叫做元素选择器
- 类选择器
- ID 选择器
- 通用选择器
- 属性选择器
这 5 个基本选择器咱们不仅要学习,而且要掌握的很好才行。因为其他四类选择器很多都是基于基本选择器才可以使用的!
类型选择器
好了,闲话少叙,咱们先来看看类型选择器吧。简单来说,类型选择器就是通过 HTML 元素的标签名来定位 HTML 元素。它的语法结构是这个样子的:
标签名 {
样式声明块
}
语法一般都比较抽象、难懂的,咱们还是通过一个示例来看看类型选择器的用法吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型选择器</title>
<style>
h2 {
color: lightcoral;
font-weight: 400;
}
</style>
</head>
<body>
<h2>CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2>浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2>CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
在这个示例里面,类型选择器会定位到 HTML 中所有的 <h2>
元素,并为这些 <h2>
元素设置样式。
通过这样一个示例,咱们也能看到,如果想让某一个 <h2>
元素显示和其他 <h2>
元素不同的样式,类型选择器是做不到的。因为类型选择器只能定位到标签名相同的所有元素,并不能具体到某一个元素。可要记住了哦,将来在你使用的时候,很可能会遇到这样的问题。
类选择器
搞定了类型选择器,咱们再来看看类选择器。简单来说,类选择器就是通过 HTML 元素的 class
属性来定位 HTML 元素的。它的语法结构是这个样子的:
.类名 {
样式声明块
}
废话不多说,咱们还是直接上示例吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.titleOne {
color: lightcoral;
font-weight: 400;
}
.titleTwo {
color: lightseagreen;
font-weight: 800;
}
</style>
</head>
<body>
<h2 class="titleOne">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2 class="titleTwo">浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2 class="titleOne">CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
咱们把这个示例运行一下,看看效果如何:
类选择器的用法稍微有点复杂,它是一个 .
加上一个类名组成的,对应着 HTML 元素的 class
属性值的。这个对应关系可得搞清楚了,很容易就晕掉了!
ID 选择器
接下来是 ID 选择器,这个选择器是通过 HTML 元素的 id
属性的值来定位 HTML 元素的。它的语法结构是这个样子的:
#ID {
样式声明块
}
咱们还是直接来看示例吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#MyTitle {
color: lightcoral;
font-weight: 400;
}
</style>
</head>
<body>
<h2 id="MyTitle">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2>浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2>CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
这个示例运行的效果是这样的:
关于 id
属性我得告诉,它可是唯一的。也就是说,id
属性的值只能有一个。换句话讲,ID 选择器能定位的 HTML 元素也只能有一个。不用我再说,你也应该能想到 ID 选择器的问题了吧?!
通用选择器
接下来要说的这个选择器,叫做通用选择器,也可以叫做通配符选择器。这个选择器的用法是比较特殊的,因为它可以定位到 HTML 所有的元素。它的语法结构是这个样子的:
* {
样式声明块
}
是的!你没看错,通用选择器就是一个星号(*
)。特殊吧?连使用的符号都是这么的特殊。咱们还是看一个它的示例吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通用选择器</title>
<style>
* {
color: lightslategray;
font-size: 14px;
font-weight: 300;
}
</style>
</head>
<body>
<h2 id="MyTitle">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2>浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2>CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
这个示例运行后的效果是这样子的:
从运行的效果上来看,想必你已经想到通用选择器的作用了。没错~ 它基本上就是用来为 HTML 设置基本的样式的,比如字体大小、颜色等等。
属性选择器
终于到了第 5 个选择器了,也就是基本型选择器的最后一个,属性选择器。这个选择器可能是 5 个基本选择器里面最复杂的一个了,为啥这么说呢?因为属性选择器的具体用法居然有 7 种之多,光数量上就是最多的,这还是且不说用法上的复杂呢!
不管怎么样,咱们都得学习不是?!先来简单罗列一下这 7 种属性选择器吧:
[attr]
属性选择器:通过 HTML 元素的 attr 属性名来定位具体 HTML 元素,而不关注 attr 属性的值是什么。[attr=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 来定位具体 HTML 元素。[attr~=value]
属性选择器:通过 HTML 元素的 attr 属性名,属性值是一个以空格分隔的列表并且 value 值是该值列表中的之一,来定位具体 HTML 元素。[attr|=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值为 value 或者以value
为前缀来定位具体 HTML 元素。[attr^=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为开头来定位具体 HTML 元素。[attr$=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是以 value 为结束来定位具体 HTML 元素。[attr*=value]
属性选择器:通过 HTML 元素的 attr 属性名并且属性值是包含 value 来定位具体 HTML 元素。
罗列完了,是不是一脸懵逼?说心里话,我在第一次看到属性选择器的时候,也是一脸懵逼的。那怎么办?其实后来我发现这 7 种属性选择器并不是每一个咱们在开发的时候都能用得上。最常用的属性选择器也就是前三个吧,所以接下来,咱们就重点来看看前三个属性选择器的用法。
[attr]
选择器
首先,咱们来看看第一个属性选择器吧。[attr]
选择器是通过 HTML 元素的属性名来定位 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>[attr]属性选择器</title>
<style>
[name] {
color: lightcoral;
font-weight: 400;
}
</style>
</head>
<body>
<h2 name="title">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2 name="title">浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2 name="title">CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
这个示例的运行效果是这样的:
[attr]
属性选择器只是通过 HTML 元素是否具有 attr
属性名来定位 HTML 元素,至于这个属性的值是什么并不重要。
[attr=value]
选择器
[attr=value]
选择器算是 [attr]
选择器的升级版本,因为 [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>[attr=value]属性选择器</title>
<style>
[name=titleOne] {
color: lightcoral;
font-weight: 400;
}
</style>
</head>
<body>
<h2 name="titleOne">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2 name="title">浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2 name="title">CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
这个示例的运行效果就变成了这个样子:
[attr~=value]
选择器
[attr~=value]
选择器的用法更为复杂了一些,因为这个属性选择器是通过 HTML 元素的 attr
属性名,并且属性值是一个以空格分隔的列表,而 value
是这个列表中的一个值,来定位 HTML 元素的。
这个很难用语言来说清楚,真的,挺难的!咱们还是通过一个示例来了解一下吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[attr~=value]属性选择器</title>
<style>
[class~=title] {
color: lightcoral;
font-weight: 400;
}
</style>
</head>
<body>
<h2 class="text title">CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets,整了俩外国妞儿,不对,是外国妹子,刺激吧?!中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了,她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2>浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话,HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿,就有个问题啦!在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢?咱们就来试一试吧!</p>
<h2>CSS 的前世今生</h2>
<p>CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯(Bert Bos) 当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计 CSS。也就是说,CSS 这妹子可是个 90 后哦!</p>
</body>
</html>
这个示例的运行效果是这个样子的:
通过这个示例咱们可以很清楚地看到,首先第一个 <h2>
元素具有 class
属性,并且属性值是一个以空格分隔的列表,而 [class~=title]
选择器中的 title
刚好是这个属性值列表中的一个值。
关于其他的属性选择器,咱们这儿就不再去研究了。如果将来你真的在工作里面用到了,现用现学吧!
选择器的优先级
总算是把基本选择器给整完了,太不容易了!说了这么多的选择器,你现在可能会有点迷糊。不过不用怕,因为打这儿起咱们就离不开选择器了。慢慢你会越来越熟悉它的,总得有个过程不是?!
那接下来,咱们还得说个事儿,这么多选择器了,如果咱们在一个示例里面都用到了,到底是谁有效呢?想要知道这个答案,咱们就得说一说 CSS 选择器的优先级别了。
CSS 的选择器是有明确的优先级别的,通过这个优先级别,咱们就知道最终到底是哪个样式的声明块是有效的,哪个样式的声明块是被覆盖了的。
为了方便咱们来计算出选择器的优先级别,CSS 为不同的选择器提供了相应的值:
- 通配符选择器的优先级为 0
- 类型(元素)选择器的优先级为 1
- 类选择器和属性选择器的优先级为 10
- ID 选择器的优先级为 100
这么看就一目了然了,优先级别最低的是通用选择器,最高的是 ID 选择器。当然,这都是指在内嵌样式表或者外联样式表里面。因为,内联样式的优先级别是高于内嵌样式表和外联样式表的。如果同样用值来表示的话,内联样式的值为 1000。
!important 规则
当然了,凡事总有个例外,在 CSS 选择器的优先级别这件事儿上也同样存在着一个例外,这就是 !important
规则。什么意思呢?就是说,但凡任何一个 CSS 样式声明的后面加上了这个 !important
规则,那这个声明的优先级别瞬间就是最高级别了。不信咱们来看个示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>!important规则</title>
<style>
.title {
color: lightslategray !important;
}
</style>
</head>
<body>
<h2 class="title" style="color: lightcoral;">!important规则是例外,它的优先级别最高</h2>
</body>
</html>
在这个示例里面,咱们可以看到,原本 style
属性方式的内联样式的优先级别最高,但是由于在 .title
类选择器里面的 color
声明使用了 !important
规则导致这个内嵌样式表的优先级别最高了。所以,<h2>
元素的文字最终显示的颜色应该是 lightslategray
:
这里说个题外话,其实并不太建议你使用 !important
规则,因为它会破坏 CSS 选择器原本的优先级别。所以,在开发中会引起一些问题的。