CSS的優先順序如何確定?

來源:互聯網
上載者:User

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> new document </title><br /><meta name="generator" content="editplus" /><br /><meta name="author" content="" /><br /><meta name="keywords" content="" /><br /><meta name="description" content="" /><br /><style type="text/css"><br />body{<br />background-color:white;<br />color:black;<br />}<br />h1<br />{<br />background-color:blue;<br />color:red;<br />}<br />em<br />{<br />background-color:green;color:black;<br />}<br />#serious{color:blue;}<br />.yahoo{color:black;background-color:yellow;}<br />#serious{color:red;}<br />h1 em<br />{<br />color:lime;<br />}<br /></style><br /></head><br /><body><br /><em id="serious" class="yahoo">yahoo</em><br /></body><br /></html><br />

 

 <em   id="serious" class="yahoo">yahoo</em>
em標籤定義了一個id選擇符、類選擇符和類型選擇符
運行上述代碼後發現:
em標籤的background-color應用的是yahoo類選擇符中的background-color屬性。
而color應用的卻是第二個#serious ID選擇符的屬性
這個優先順序是如何定義的?


ID選取器(形如#divMain{}) > 類(形如.divSpecial{}) > 標籤(形如body{})

當定義的屬性有衝突時,以最後定義的為準

相關文章

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.