CSS 类选择器

类型选择器主要用于选中 HTML 中的文档元素(Document elements)，但是很多时候，你想要选中的网页元素不是特定的几种 HTML 文档元素。

例如：我们的页面上包含了一些包含警告信息的元素，我们想将这些文字显示为粗体。但是警告信息可能包含在一个单独的段落，其他的可能是某个章节的一部分，等等。

这种情况，使用普通的类型选择器已经不行了。

类选择器

类选择器 (class selector) 通过匹配 HTML 元素的 class 属性来选中 HTML 文档元素.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    *.warning {font-weight: bold;}
  </style>
</head>
<body>
<p class="warning">When handling plutonium, care must be taken to avoid
the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
</body>
</html>

上面例子中我们将一个 p 元素和一个 span 元素标记为 warning class, 然后使用 *.warning {font-weight: bold;}来匹配到它们。

*.warning {font-weight: bold;}: 其中:

.: 总是需要出现的，表示它是一个类选择器
warning: 需要时出现在元素的 class 属性中。 (元素 class 属性可以包含多个值)
*：表示匹配所有 class 属性中有 warning 的元素

与类型选择器搭配使用

比如，你并不想高亮所有 class 属性带有 'warning' 的元素，而是仅仅高亮带有 warning 的 p 元素, 可以这样用:

p.warning {font-weight: bold;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    p.warning {font-weight: bold;}
  </style>
</head>
<body>
<p class="warning">When handling plutonium, care must be taken to avoid
the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
</body>
</html>

注意到：只有这里 span 元素的文字就没有粗体显示，而 p 元素中文字显示为粗体。

因此，你可以使用不同的样式来突出显示不同元素中的 warning 文字：

将 p 元素的 warning 文本显示为粗体： p.warning {font-weight: bold;}
而将 span 元素中的 warning 文本显示为斜体： span.warning {font-style: italic;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    p.warning {font-weight: bold;}
    span.warning {font-style: italic;}
  </style>
</head>
<body>
<p class="warning">When handling plutonium, care must be taken to avoid
the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
</body>
</html>

如果你还想给所有的 warning 添加一套公用的样式，而对于特定元素下的 warning 再额外添加其他样式：比如，所有 warning 文本都以斜体显示，对于 span 元素中的 warning 文本还需要加粗显示，那么可以这样做：

.warning {font-style: italic;}
span.warning {font-weight: bold;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    .warning {font-style: italic;}
    span.warning {font-weight: bold;}
  </style>
</head>
<body>
<p class="warning">When handling plutonium, care must be taken to avoid
the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
</body>
</html>

包含多个值的 class

class 属性中可以包含多个值，使用空格分隔。

比如:

<p class="urgent warning">When handling plutonium, care must be taken to
avoid the formation of a critical mass.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>

注意:

多个值的顺序没有影响。
类选择器是大小写敏感的。

现在，比如你想将 warning 文本显示为粗体，将 urgent 文本显示为斜体，然后将同时标记为 warning 和 urgent 的文本背景色显示为银色，可以这样做：

.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    .warning {font-weight: bold;}
    .urgent {font-style: italic;}
    .warning.urgent {background: silver;}
  </style>
</head>
<body>
<p class="warning urgent">When handling plutonium, care must be taken to avoid
the formation of a critical mass.</p>
<p class="urgent">This is urgent text paragraph.</p>
<p>With plutonium, <span class="warning">the possibility of implosion is
very real, and must be avoided at all costs</span>. This can be accomplished
by keeping the various masses separate.</p>
</body>
</html>

CSS 类选择器

类选择器

与类型选择器搭配使用

包含多个值的 class

分类