CSS樣式權值的詳細介紹

來源:互聯網
上載者:User
內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet)
例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表;
1,內聯樣式表權值為1000;
2,ID選取器的權值為100;
3,Class類別選取器的權值為10;
4,HTML標籤選取器的權值為1;
具體代碼如下:

<!DOCTYPE html>      <html lang="en">      <head>          <meta charset="UTF-8">          <title>CSS樣式權值</title>          <style>              body{                   font-size: 20px;                   font-weight: 900;                }               h3{                   color: yellow;               }               #redP p{                   /*權值100+1=101*/                   color: #f00;                   /*紅色*/               }               #redP p.red em{                   /*權值100+1+10+1=112*/                   color: #00f;                   /*藍色*/               }               #redP .red em{                   /*權值100+10+1=111*/                   color: #0ff;                   /*亮藍色*/               }                           #redP p span em{                   /*權值100+1+1+1=103*/                   color: #ff0;                   /*黃色*/               }           </style>          <link rel="stylesheet" href="style.css">      </head>      <body>          <h3>例外:外部樣式表>內部樣式表</h3>          <p id="redP">              <p class="red">                  <span>                      <em>emred</em>                  </span>              </p>              <p>red</p>          </p>      </body>      </html>


相關文章

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.