然后对该HTML文档应用下面的样式表:

/* 基本的table样式 */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* 所有在table里的td以及th，这里的逗号不是一个组合器，
    它只是允许你把几个选择器对应到相同的CSS规则上.*/
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* 所有table里的thead里的所有th */
table thead th {
  color: white;
  background: black;
}

/* 所有table里的tbody里的所有td，每个td都是由它上边的td选择 */
table tbody td + td {
  text-align: center;
}

/*table里所有的tbody里的td当中的最后一个 */
table tbody td:last-child {
  text-align: right
}

/* 所有table里的tfoot里的th */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* 在table当中，所有的th之后的td */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* 拥有属性lang并且这个属性值为en-US的类名为“with-currency”里边的td当中
的最后一个元素添加一个伪类::before*/
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* 拥有属性lang并且这个属性值为fr的类名为“with-currency”里面的td当中的
最后一个元素添加一个伪类::after */
.with-currency[lang="fr"] td:last-child::after {
  content: ' ?';
}

效果如下：

应用同一规则的选择器组

你已经遇见过这种做法的许多例子，但还是让我们来把它进一步阐释清楚。通过相互间用逗号分隔的多个选择器所形成的组，可以一次性将同一规则同时应用到多组选定元素。例如：

p, li {
  font-size: 1.6em;
}

或者这样:

h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

组合器和多个选择器（高级选择器）总结

可以形像分为

• 后代选择器 （空格）
  • 使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
• 子代选择器 （>）
  • 使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
• 兄弟选择器 （+ ~）
  • A+B匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
  • A~B匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
• 并集选择器 （逗号）
  • 多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
• 交集选择器 （.）
  • 使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

关于选择器就浅析到这了。
end
2018-5-31