aa.cc與.aa .cc等CSS定義的含義分析

在 CSS 定義中，有時我們會遇到 .aa.cc {}、.aa .cc {}的定義方法，這兩種定義有什麼區別呢？

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

 在網頁中放入以下結構代碼，可以看到不同的效果：

網頁結構代碼一：

 <div class="">
  <div class="aa cc">text</div>
 </div>

效果一：

網頁結構代碼二：

 <div class="aa">
  <div class="cc">text</div>
 </div>

效果二：

.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 的樣式也受影響。

 

轉自：雅虎