微信开发之CSS 类选择器

先从代码示例入手：

.tapNav.selected{
  background:lightblue;

}

<text wx:for="{{dataList}}" class="tapNav {{curNav === index ? 'selected' : ''}}" data-index="{{index}}" bindtap="selectNav">{{item.name}}</text>

可以看到：

text 可能存在样式class = "tapNav selected"，那么样式包含多个单词，如何理解呢？

CSS 多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

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

请看下面的规则：

.important.urgent {background:silver;}

它能匹配以下元素：

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

参考：http://www.w3school.com.cn/css/css_selector_class.asp