选择有很多种，CSS提供了哪些呢

如果你已经看到这儿了，那么恭喜你！你已经成功的入门了。至少现在你知道了 HTML 的基本结构、CSS 和 HTML 之间的关系，以及怎么在 HTML 里面使用 CSS。

那么，接下来，咱们将学习对于 CSS 这妹子很重要的选择器。因为它是把 HTML 元素和 CSS 外联样式成功地连接在一起的纽带，说白了，CSS 样式想要作用在某个 HTML 元素上，就得先通过选择器定位到这个元素才可以。

选择器能做什么

刚才已经说得很明白了，选择器就是来定位 HTML 元素的，这样才能成功地让 CSS 样式作用在一个或者多个 HTML 元素上。

CSS 的选择器定位 HTML 元素会有三种情况出现：

一个选择器定位一个 HTML 元素
一个选择器定位多个 HTML 元素
多个选择器定位一个 HTML 元素

咱们就分别来看看这三种情况的具体方式吧。

一个选择器定位一个 HTML 元素

CSS 的选择器提供众多的选择给咱们使用，其中有个叫做 ID 选择器的，它就可以做到一个选择器定位一个 HTML 元素。光说不练多没劲啊，接下来咱们来看一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个选择器定位一个HTML元素</title>
  <style>
    #headerOne {
      color: lightcoral;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <h1 id="headerOne">一个选择器定位一个 HTML 元素</h1>
  <h1>这是另一个 h1 标题元素</h1>
</body>

</html>

咱们可以看到，虽然 HTML 里面有两个 <h1> 元素，但 CSS 样式只对 id 为 headerOne 的 <h1> 元素有效。不信的话，咱们来看看运行的效果：

在这里插入图片描述

一个选择器定位多个 HTML 元素

看过一个选择器定位一个 HTML 元素之后，咱们再来看看一个选择器怎么定位多个 HTML 元素。在 CSS 的选择器中有个叫做类型选择器的，它可以定位到标签名相同的所有标签。咱们还是先来看个示例吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个选择器定位多个HTML元素</title>
  <style>
    h1 {
      color: lightcoral;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <h1>一个选择器定位多个 HTML 元素</h1>
  <h1>这是另一个 h1 标题元素</h1>
</body>

</html>

咱们可以看到，通过类型选择器可以定位到 HTML 中的所有 <h1> 元素。说了可能你也不会信，还是看运行的效果吧：

在这里插入图片描述

多个选择器定位一个 HTML 元素

咱们已经看过两种情况了，咱们再来看看最后一种情况吧。废话不多说，还是先从一个示例入手：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多个选择器定位一个HTML元素</title>
  <style>
    h1#headerOne {
      color: lightcoral;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <h1 id="headerOne">一个选择器定位一个 HTML 元素</h1>
  <h1>这是另一个 h1 标题元素</h1>
</body>

</html>

在这个示例里面，咱们可以看到不仅要定位到 <h1> 元素，还要是 id 为 headerOne 的 <h1> 元素。这个示例的运行效果和第一种情况的示例的运行效果是一样的：

在这里插入图片描述

可能你也发现了，这第三种情况的示例和第一种情况的示例从效果上来看没什么区别嘛！确实是这样的，但是选择器的意义是不一样的。第一种情况的选择器就是定位 id 为 headerOne 的元素，具体是什么标签是不确定的；第三种情况的选择器是先定位所有的 <h1> 元素，然后在所有的 <h1> 元素中再定位 id 为 headerOne 的元素。

说得有一点点拗口啊~ 但还是希望你能明白我在说什么，因为这个很重要的！

选择器的分类

说完了选择器定位 HTML 元素的三种情况之后，咱们再来说说 CSS 提供的选择器有多少种。发展到 CSS3 版本之后，选择器的数量还是相当的多的！为了方便咱们学习和记住它们，先来简单地分个类吧：

基本选择器：一共有 5 个，是 CSS 所有选择器中最简单，也是最常用的。
层级选择器：一共有 4 个，主要是通过 HTML 元素之间的关系来定位元素。
群组选择器：是一种多个选择器的叠加用法。
伪类选择器：是用来设置定位的 HTML 元素在未来可能出现的某种状态的样式。
伪元素选择器：是用来设置定位的 HTML 元素中特定部分的样式。

每一种选择器的解决稍微有点官方，也就是难懂。不过，现在呢也无所谓，你只要知道咱们可以把选择器分成这 5 类就可以了。关于选择器的具体用法，还得听我漫漫道来~