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>

举个例子：

 

1. <style> 
2. .classa.classb 
3. { 
4.     background:green; 
5. border: 1px solid blue ; 
6. } 
7. .classa .classb 
8. { 
9. background:yellow; 
10. border: 1px solid black ; 
11. } 
12. </style> 
13. <input type="text" class="classa classb"/> 
14.  
15. <div class="classa"> 
16.    <input type="text" class="classb"/> 
17. </div> 

 

效果图如下：

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

 

1. <style> 
2. input.text 
3. { 
4.      border: 1px solid red; 
5. } 
6. </style> 
7. <div> 
8.      <input type="text" class="text"/> 
9. <input type="text"/> 
10. </div> 

 

效果图如下：

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

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