今天看到有网站使用.classA.classB类似的选择器，不知道是否有人和我一样没有用过，所以了解一下，以下记录。

一、用法介绍

在css中.classA.classB指的是一个元素，同时满足classA和classB，即(class="classA classB")

------------------------------------------------
     
  
      
     

id选择器也是类似的：

--------------------------------------------------------
     
      选择器#id.class
     
     
      
       选择器#id .class
      
     

 同时使用多个选择器的组合同理。

------------------------------------------------------------
选择器是 #one.two.three

二、什么场合下使用？

类似#id.class这样的写法真的可取吗？id选择器本来就是独一无二的，为什么还要和class选择器组合使用呢？

这种写法在有些场合确实是有它的用武之地的。

1、覆盖已有样式时可以使用：

举个例子：

什么场合使用？

现在的文章颜色为红色，想将其变为黑色怎么办？

使用!import当然可以做到。

但是!import能不用就不要用，此时使用#header.override更好一点。

“百度一下”就是用这种组合使用css的方法实现的。

       hover效果为

2、 oocss样式

还有一种情况，就是下面这种oocss样式。

---------------------------------------------------------
     
      red border box
     
     
      blue border box
     
     
      green border box
     
     
      red box
     
     
      blue box
     
     
      green box
     
     
      border box
     

如果现在有一个需求说：黑色的边框并不适合红色的盒子，需要把红色盒子的边框改为红色，这时候就可以使用.red.border选择器了。

.red.border{  border-color:red;}

实际上，类似.classA.classB这样的用法之所以能覆盖原有样式，就是因为它改变了优先级。

关于优先级了解更多可参考：

资源链接：