CSS 类选择器#
类型选择器主要用于选中 HTML 中的文档元素(Document elements)， 但是很多时候，你想要选中的网页元素不是特定的几种 HTML 文档元素。
例如： 我们的页面上包含了一些包含警告信息的元素，我们想将这些文字显示为粗体。 但是警告信息可能包含在一个单独的段落，其他的可能是某个章节的一部分，等等。
这种情况，使用普通的类型选择器已经不行了。
类选择器#
类选择器 (class selector) 通过匹配 HTML 元素的 class 属性来选中 HTML 文档元素.
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 avoidthe formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion isvery real, and must be avoided at all costs</span>. This can be accomplishedby 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;}
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; } p.warning {font-weight: bold;} </style></head><body><p class="warning">When handling plutonium, care must be taken to avoidthe formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion isvery real, and must be avoided at all costs</span>. This can be accomplishedby 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;}
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; } p.warning {font-weight: bold;} span.warning {font-style: italic;} </style></head><body><p class="warning">When handling plutonium, care must be taken to avoidthe formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion isvery real, and must be avoided at all costs</span>. This can be accomplishedby keeping the various masses separate.</p></body></html>如果你还想给所有的 warning 添加一套公用的样式， 而对于特定元素下的 warning 再额外添加其他样式： 比如， 所有 warning 文本都以斜体显示， 对于 span 元素中的 warning 文本还需要加粗显示，那么可以这样做：
CSS
.warning {font-style: italic;}span.warning {font-weight: bold;}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-style: italic;} span.warning {font-weight: bold;} </style></head><body><p class="warning">When handling plutonium, care must be taken to avoidthe formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion isvery real, and must be avoided at all costs</span>. This can be accomplishedby keeping the various masses separate.</p></body></html>包含多个值的 class#
class 属性中可以包含多个值，使用空格分隔。
比如:
HTML
<p class="urgent warning">When handling plutonium, care must be taken toavoid the formation of a critical mass.</p><p>With plutonium, <span class="warning">the possibility of implosion isvery real, and must be avoided at all costs</span>. This can be accomplishedby keeping the various masses separate.</p>注意:
- 多个值的顺序没有影响。
- 类选择器是大小写敏感的。
现在，比如你想将 warning 文本显示为粗体，将 urgent 文本显示为斜体，然后将同时标记为 warning 和 urgent 的文本背景色显示为银色，可以这样做：
CSS
.warning {font-weight: bold;}.urgent {font-style: italic;}.warning.urgent {background: silver;}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;} .urgent {font-style: italic;} .warning.urgent {background: silver;} </style></head><body><p class="warning urgent">When handling plutonium, care must be taken to avoidthe 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 isvery real, and must be avoided at all costs</span>. This can be accomplishedby keeping the various masses separate.</p></body></html>