CSS选择器 类选择器 .classA.classB 和.classA .ClassB的区别

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

.classA.classB指的是一个元素，同时满足.classA和classB

<div class="classA classB"></div>

.classA .classB指的是classB内嵌于classA

<div class="class">

<div class="classB">

</div>

</div>

举个例子：

 
 


  
  
<style> 

  
  
.classa.classb 

  
  
{ 

  
  
    background:green; 

  
  
border: 1px solid blue ; 

  
  
} 

  
  
.classa .classb 

  
  
{ 

  
  
background:yellow; 

  
  
border: 1px solid black ; 

  
  
} 

  
  
</style> 

  
  
<input type="text" class="classa classb"/> 

  
  
 

  
  
<div class="classa"> 

  
  
   <input type="text" class="classb"/> 

  
  
</div> 
 
 

效果图如下：

事实上不一定两个都是class选择器，可以直接用元素或者id选择。比如：

 
 


  
  
<style> 

  
  
input.text 

  
  
{ 

  
  
     border: 1px solid red; 

  
  
} 

  
  
</style> 

  
  
<div> 

  
  
     <input type="text" class="text"/> 

  
  
<input type="text"/> 

  
  
</div> 
 
 

效果图如下：

具体的效果还要根据各个浏览器而定。

本文转自cnn23711151CTO博客，原文链接：http://blog.51cto.com/cnn237111/1095630 ，如需转载请自行联系原作者