CSS特异性的计算方法是什么?
P粉823268006
P粉823268006 2023-08-23 09:46:01
[CSS3讨论组]

研究特异性时,我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是CSS的一个得分系统。它告诉我们,元素值为1分,类值为10分,ID值为100分。它还继续说这些分数会被累加,总分就是选择器的特异性。

例如:

body = 1分

body .wrapper = 11分

body .wrapper #container = 111分

因此,使用这些分数,我期望以下的CSS和HTML会导致文本变为蓝色:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}
<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              这应该是蓝色的。
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为什么文本是红色的,当15个类等于150分,而1个ID等于100分?

显然,这些分数不仅仅是累加的;它们是连接在一起的。在这里了解更多 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

这是否意味着我们选择器中的类 = 0,0,15,0 或者 0,1,5,0

(我的直觉告诉我应该是前者,因为我们知道ID选择器的特异性是这样的:0,1,0,0)

P粉823268006
P粉823268006

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号