CSS class 选择器

使用 CSS 标签选择器的时候，会选择 HTML 页面对应标签的所有元素，例如使用 div 选择器，会选择所有的 <div /> 标签，无论标签是否嵌套，处于任何位置，示例代码如下：

html 页面示例

<div>
 <div></div>
 <div></div> 
 <div><div></div></div>
 <div><div></div></div>
</div>
<div></div>

CSS 标签选择器示例

div { /* 会选择上面 HTML 中，所有的<div/> 标签 */
  width: 200px;
  height: 150px;
}

如果想要选择特定的一个，或者一组 HTML 元素，那么可以使用 CSS Class选择器，来选择 HTML class 属性值所对应的元素。这一小节我们看一下 CSS Class 选择器的使用方法。

CSS Class 选择器使用方法

假设有这样的 HTML 页面，使用 "container" 来代表一个容器，"card" 来代表一个卡片组件，"card--content" 代表卡片内容，代码如下：

<div class="container">
  <div class="card">
    <div class="card--content">卡片内容</div>
  </div>
</div>

HTML 里使用了相同的 div 元素来表示不同的组件，使用不同的 class 名字用于区分，这时可以使用 CSS class 选择器，来选择特定 class 名字的元素。CSS Class 选择器的语法是，使用 . 号加上 class 名字的形式，例如选择 class 为 "container" 的元素，CSS class 选择器语法为：".container"。给上面 HTML 的元素，添加样式的代码如下：

.container {
  width: 300px;
  height: 150px;
}

.card {
  border: 1px solid #aaaaaa;
  padding: 24px;
}

.card--content {
  color: hsl(214deg, 50%, 60%);
}

预览：

提示

这里的 class 使用了 CSS BEM 命名法。

如果有多个 HTML 元素使用了相同的 class 名字，那么 CSS class 选择器会选择所有的、class 名字相同的元素，示例代码如下：

<style>
  .nav--item {
    color: hsl(200deg, 50%, 40%);
  }
</style>

<nav>
  <a href="#" class="nav--item">导航链接1</a>
  <a href="#" class="nav--item">导航链接2</a>
  <a href="#" class="nav--item">导航链接3</a>
  <a href="#" class="nav--item">导航链接4</a>
<nav>
<a href="#">其它链接</a>

预览：

可以看到只有具有 "nav--item" class 的 <a /> 标签被选择了，而其它的 <a/> 标签则没有收到影响。

小结

这个就是 CSS class 选择器的使用方法和功能，相比与 CSS 标签选择器，CSS class 选择器可以选择更为具体的元素，即选择特定 class 名字的元素，另外，如果 HTML 元素中有相同 class 名字的元素，那么也会一起选择。