aa.cc与.aa .cc等CSS定义的含义分析

在 CSS 定义中，有时我们会遇到 .aa.cc {}、.aa .cc {}的定义方法，这两种定义有什么区别呢？

CSS定义：
.aa.cc {
   background-color: yellow;
}
.aa {
   background-color: blue;
}
.cc {
   background-color: red;
}

在网页中放入以下结构代码，可以看到不同的效果：

网页结构代码一：

效果一：

网页结构代码二：

效果二：

.aa.cc这种方式很少用，.aa .cc、P.aa这样的定义方式一般比较常用。

.aa.cc　这样是多值属性定义，一般是：
<div class="aa cc">text</div>

.aa .cc　这样是包含选择符定义，一般是：
<div class="aa">
<div class="cc">text</div>
</div>

P.aa　这样是类选择符（或ID选择符 P#aa）定义，一般是：
<p class="cc">text</p>
<p id="cc">text</p>

P .aa　这样是包含选择符定义，一般是：
<p>
<div class="cc">text</div>
</p>

这里主要是要理解 .aa.cc、.aa .cc、P.aa、P .aa 这些不同CSS写法，在网页的代码结构中是如何写的。

要注意的是，在 IE 6、IE 7、FF都支持 .aa.cc {} 这种 CSS 定义，但是在 IE 6下，定义 .aa.cc {} 时，.cc 的样式也受影响。

转自：雅虎