相关疑难解决方法(0)

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

它指出特异性是CSS的点评系统.它告诉我们元素值1分,类值10分,ID值100分.它也是最重要的说这些点总计,总量是选择器的特异性.

例如:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

因此,使用这些点肯定会使以下CSS和HTML导致文本为蓝色:

CSS:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

HTML:

<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 …

有没有人知道是否有某种工具来查看/选择基于CSS特异性的最佳CSS选择器来定位特定的div？

我知道什么具有更高的特异性,但有时当处理其他人在CSS中深度嵌套选择器的项目时,很难找到覆盖那些东西的方法.

我知道在谷歌chromes开发工具/ firebug它在查看页面源时在底部显示了很多信息,是应该用于此的东西还是有其他方法？

我的主要目标是尝试根据特异性重新排序CSS样式块.我之前从SO那里得到了帮助,我设法产生了这个功能.见要点.

这是一个例子:

function specificity($selector){
// https://gist.github.com/2774085
}

$compare = function($a, $b) use ($specificity) {
    return $specificity($a) - $specificity($b)
};

$array = css_array();

uksort($array, $compare);

以上一直很有效,直到我遇到这个CSS:

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

这被重新排序到这个:

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

但是,这不是浏览器应用CSS的方式.

我认为我的特异性功能可能缺少CSS顺序的重要性而不是基于选择器特异性的排序？这是真的？

更新

我认为我应该做的是在我的比较函数中,我应该总是添加额外的说法,10因为特异性不仅仅基于选择器,它也基于选择器的顺序.所以像这样:

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    }; …