CSS 权重值

计算权重值判断哪种样式优先应用

  • 一个标签选择器值1分
  • 一个类选择器值10分
  • 一个ID选择器值100分
  • 一个内建样式值1000分

关于Web浏览器如何计算权重值，请登录网站：http://www.w3.org/TR/CSS21/cascade.html#specificity 了解

注：伪元素（pseudo-element）（如：:first-child）通常被当作标签选择器，值1分。伪类（pseudo-element）(如:hover)则被当作类，值10分。

权重值相同时，最后一个样式优先.

<!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>specifity</title>
    <style type="text/css">
    p.email {
        color: green;
        font-size: 18px;
    }
    .byline a {
        color: red;
        font-size: 18px;
    }
    </style>
    </head>
    <body>
    <p class="byline">
        Written by<a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a>
    </p>
    </body>
</html>

上例中的两个样式权重值都为11,（一个类选择器值10分，一个标签选择器值1分）,且两者都应用于a标签浏览器优先选择的是最后一个样式,所以链接文字显示为红色，如果将两个样式的位置调换，会得到不同的效果，链接将会显示为绿色。

       p .email {
        color: green;
        font-size: 18px;
    }
    .byline a {
        color: red;
        font-size: 18px;
    }

 

 

 

 

posted @ 2013-12-05 12:51  夏影_shadow  阅读(249)  评论(0)    收藏  举报