定义情况: CSS1 CSS2 CSS3
类选择器，选择匹配所有元素class属性中“包含”给定值的那些元素：
比如下面一段html代码片段：
<input class="base-button ok-button" value="确定" /> <button class="base-button cancel-button>取消</button> <a href="#" class="not-a-button">这个不是按钮</a>
如果要对其中的“全部”按钮施加一定的样式，可以如下：
.base-button{}
由于我们还没有接触到任何的css的样式属性，所以上面这个样式代码没有起到美化的作用，不过不要紧我可以作为后面学习而占位(Place Holder).
注意除非你知道你将要做什么，否则不要直接这样使用一个全局性的类选择器，组合后面的一些选择器缩小你的范围吧，否则她的影响不亚于编程语言学里的全局变量的危害，这点这些基础选择器都需要引起注意。
注：类标识的字符要求，尽管W3C关于标识符规定来得不像一些编程语言标识符那么严格，然后选择一个团队习以为常的语言标识符的约定不失为一个好习惯，本身采用-连字符分隔单词的命名方式，如果你对标识符这一块有兴趣，请查阅W3C关于CSS规范的相关章节。
兼容性：
从附录A表可以看到除了IE6支持不够完美以外，其他浏览器基本都是完美支持类选择器的，我们来看下IE6在哪些地方没有做好：
前面代码我们看到，其实同一个元素我们是可以指定多个class值的，方法是用空格隔开你的多个类标识符。多个class所施加的样式会应用到这个元素上，相同属性冲突法则一般是后者覆盖前者，多数情况不会有什么问题，然后ie6对于.class1.class2.class3这样的多类选择器是理解有出入，它会忽视前面那些类，只认为最后一个class，所以.class1.class2.class3在它看来只是.class3而已，于是对于某些时候你想按如下方式施加样式时就得注意了：
<ul> <li class="menu-item home"><a href="#">首页</a></li> <li class="menu-item"><a href="#">新闻</a></li> <li class="menu-item current"><a href="#">产品</a></li> <li class="menu-item"><a href="#">案例</a></li> <li class="menu-item hidden"><a href="#">案例</a></li> <li class="menu-item"><a href="#">留言</a></li> <ul>
加入上面这段代码，.current代表当前的菜单项，我用.home来对首页来点与众不同，毕竟有时首页看上去要和其他菜单有点区别。你的样式可能有点类似如下：
.menu-item
{
background-color:#ccc;
}
.menu-item.current
{
background-color:#333;
}
.menu-item.current.home
{
background-color:#000;
}
这看似仍然没有太大问题啊，当前菜单如果不是HOME时，背景#333,如果是.home时背景色就来点不同，没错，这里.home我们假如不考虑页面还有其他地方用到的情况，我们变个戏法，改动下：
.menu-item.home.current
{
background-color:#000;
}
对于IE来说上面意思变了，在他看来：
.menu-item { background-color:#ccc; } .current { background-color:#333; } .current { background-color:#000; }
于是乎，世界和平人人平等啦，每个当前菜单都是一样的#000黑背景，这不是你的初衷吧！
所以如果你对这个容易混，有个好办法可以保证兼容，那就是放弃使用链式的这些类选择器吧，.current-and-home或许适合你。
Bug2：#ID.class这种选择器
我想这个选择器你基本应该不会用到，毕竟原则上一个ID在一个页面里是唯一的（当然你写多了浏览器不会抱怨，我想你也不该这么做，另外跨页面公用css文件的先不提）。
知道这个bug还是有点用：
#ID.red{}
#ID.blue{}
ie会忽略掉后面的定义。
解决办法也很多：
1.放弃这种写法，既然ID唯一了为什么还要多此一举呢，还有#ID选择器优先级太高了，慎用。看得出你是想要用red字体还是blue字体？
直接.red{}或许适合你
<div id="person-name“ class="red">红色字体</div>
2.改变html结构，或者wrap下它，后者wrap内容：
如<div id="person-name"><span class="red">红色字体</span></div>
这样#person-name.red被拆成了#person-name .red就不会有问题了。
注意：关于class命名一些约定，经常看到一些网站和开发人员选择.redtext或者.bluebg之类的名字作为类名使用，其实这种习惯严格来说不太好，因为这种名字限定了你使用的是红色字体还是蓝色背景之类的样式，你无法预期将来是否变动对类的定义，玩意你改成了黑色字体呢，你可能不会改变类的引用，没问题但是谁能想到引用了.redtext的元素会是个黑色字体呢，你可能只好去替换你html里面的.redtext为.blacktext啦，这样和直接内联使用style="color:red;"有什么分别，这样违反了当初css的样式与数据分离的初衷吧。
所以w3c也建议我们起个不具有易变性的名字吧，或许.warning或者.tooltips之类的更适合你。