代码之家 › 专栏 › 技术社区 › ryanwaite28

CSS-同一目标元素的ID继承规则[重复]

css html

ryanwaite28 · 技术社区 · 4 年前

我偶然发现了这个博客- http://www.htmldog.com/guides/cssadvanced/specificity/

它指出,特异性是CSS的评分系统。它告诉我们元素值1分,类值10分,ID值100分。最重要的是,这些分数加起来,总数就是选择者的特异性。

例如:

身体 =1分
包装物 =11分
body.wrapper#容器 =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">
                              This should be blue.
                            </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 )