基本选择器：样式设计的必备工具

最新推荐文章于 2024-04-09 18:34:32 发布

不想成熟的大叔

最新推荐文章于 2024-04-09 18:34:32 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/kingj_fullstack/article/details/107524589

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解CSS中的五类基本选择器：类型选择器、类选择器、ID选择器、通用选择器和属性选择器，包括它们的语法、用法及优先级。

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

书接上文，上回书咱们知道了 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：

在这里插入图片描述