跳到主要内容位置

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%);}

预览:

tip

这里的 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 名字的元素,那么也会一起选择。