CSS多類選擇符測試

來源:互聯網
上載者:User

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>選擇符測試</title><style type="text/css">    div{display:block;width:400px;height:200px;}     #first.son{background:#ccc;}    .second.son{border:1px solid red;}</style></head><body> <div id="first" class="son first">   a </div> <div id="second"  class="son second">   b </div></body></html>

 

形如#first.son的選擇符,支援性很好,ie6及以上,ff,opera,safari等瀏覽器都支援。
形如.second.son的選擇符,在ie6下不支援,後一個類名會覆蓋前一個類名,即直接識別為.son

其實可以利用第二條情況,作為一個針對ie6的hack來使用:
.xxx.son{} 只要.xxx部分是一個不存在的類名。就可以屏蔽ie6之外的瀏覽器。只對ie6下的.son有效。
這個hack的效果同 selector{ _property:value; } 大體一致。

相關文章

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.