玩轉Dreamweaver8.0:關於衝突的CSS規則

來源:互聯網
上載者:User

  將兩個或更多 CSS 規則應用於同一文本時,這些規則可能會發生衝突併產生意外的結果。瀏覽器按以下方式應用 CSS 規則:

  • 如果將兩種規則應用於同一文本,瀏覽器顯示這兩種規則的所有屬性,除非特定的屬性發生衝突。例如,一種規則可能指定文本顏色為藍色,而另一種規則可能指定文本顏色為紅色。
  • 如果應用於同一文本的兩種規則的屬性發生衝突,則瀏覽器顯示最裡面的規則(離文本本身最近的規則)的屬性。因此,如果外部樣式表和內聯樣式同時影響文本元素,則應用內聯樣式。
  • 如果有直接衝突,則自訂 CSS 規則(使用 class 屬性應用的規則)中的屬性將覆蓋 HTML 標籤樣式中的屬性。

  在下面的樣本中,為 h1 定義的樣式可以指定所有 h1 段落的字型、大小和顏色,但應用於該段落的自訂 CSS 規則 .Blue 將覆蓋 h1 樣式中的顏色設定。另一個自訂 CSS 規則 .Red 將覆蓋 .Blue,因為它位於 Blue 樣式的內部。

   <h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>Now we''re back to the .Blue style.</span></h1>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.