标签: css-specificity

标题基本上都说明了一切.

假设我有,我想改变颜色的元素:hover,但在点击后,我希望它切换回原来的颜色.所以,我试过这个:

a:link, a:visited, a:active {
    background: red;
}
a:hover {
    background: green;
}

事实证明,这不起作用.在经历了许多:hover令人头疼的事后,我意识到国家正在压倒:active国家.这很容易解决:

a:link, a:visited {
    background: green;
}
a:hover {
    background: red;
}
a:active {
    background: green;
}

(我可以将第一条规则与第三条规则结合起来).

这是小提琴:http://jsfiddle.net/V5FUy/

我的问题:这是预期的行为吗？据我所知,:active国家应该总是覆盖:hover国家,因为:active国家几乎总是伴随着:hover国家.

我正在大量使用jQuery UI小部件,并且由于我需要解决的疏忽,主题变得越来越难.

考虑这个问题:

<div id="node" class="ui-widget">
    <div class="ui-widget-content">
    </div>
</div>

然后这个jquery

<script>
 $(function() { 
       $('#node').hover(function (){
           $(this).toggleClass("ui-state-error");
       });
 }); 
</script>

我希望ui-state-error对嵌套div很重要.这是伪代码,但我发现大量的例子发生在容器有css交换和子(basicaly)忽略它的情况下.更糟糕的是:如果我想能够在jQuery中覆盖说"backgroundcolor = ui-state-error:background-color知道100%这一切都不会破碎,因为我不知道"必然,该背景是有关元素的重要背景.

这里是一个案例的小提琴http://jsfiddle.net/WCuYH/1/

编辑我打算推荐这个问题是关闭的,因为没有任何尝试的答案,只是从原始帖子的本质偏离太多

我想知道属性选择器的特殊性是什么.例如:

• Id = 100分
• 等级= 10分
• Html Tag = 1分

例:

/* this specificity value is 100 + 10 + 1 = 111 */
#hello .class h2 { }

使用此HTML:

<div class="selectform">
<input type="text" value="inter text">
<input type="text" value="inter text" class="inputag">
</div>

这两个选择器中哪一个更具体？

.selectform input[type="text"] { }
.selectform .inputbg { }

查看演示 http://tinkerbin.com/IaZW8jbI

我注意到今天的Chrome 40更新justify-content 似乎没有得到后续样式声明的正确覆盖.

看一下这个小提琴的例子:

  <div class="flex-parent">
    <div class="flex-child"></div>
    <div class="flex-child"></div>
  </div>

和

.flex-parent {
  display: flex;
  position: absolute;
  top: 0; right: 0; left: 0;

  /*
     IT SHOULD BE POSSIBLE TO SAFELY REMOVE
     THESE TWO LINES BECAUSE THEY ARE OVERRIDEN:
  */
  background: yellow;
  justify-content: center;
}

.flex-parent {
  /* Overriding background: it works! */
  background: green;

  /* Overriding justify-content: NOPE ;-( */
  justify-content: space-between;
}


.flex-child {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: skyblue; …

只是想知道何时在一个元素上使用多个类,例如class="foo bar",这些类的设置如下:

.foo {
    margin-right: 10px;
}


.bar {
    margin-right: 0px;
}

哪个班级有特异性？保证金是10px还是0px？

根据CSS文档:http: //www.w3.org/TR/CSS21/cascade.html#specificity

特性由(除其他外)定义选择器中的属性和伪类的数量来定义.

所以,我的问题是,是否可以通过一遍又一遍地重复相同的类名来提高特异性？

例如:

将

.qtxt.qtxt.qtxt.qtxt.qtxt
{
}

具有更高的特异性

.qtxt.lalgn
{
}

要么

.lalgn .qtxt//(space added to create child selector)
{
}

？

问候:我花了几天时间试图找到一个工具,它可以显示浏览器计算的每个CSS规则的确切CSS特性数.我已经查看了许多在线资源,包括查看CSS特性的工具 - 那里有关于重写类等的链接,但我希望看到在应用特定CSS规则时浏览器计算和使用的确切特征数.

为什么我需要查看精确的CSS特异性计算？
我无法克服某个问题,即浏览器使用基于该规则与元素的接近度的CSS规则,但我之前定义了另一个规则,该规则应该具有比浏览器应用的规则更高的特异性.我没有一个简单的代码,我可以用来演示使用jsfiddle和我试图调试的代码太复杂,不包括在小提琴中.

几乎每一次搜索都会导致人们指向某种"CSS特殊规则"或"理解CSS特异性"链接.我理解CSS特性应该如何工作,广泛使用Firebug和Chrome开发人员工具,并且非常了解指向理解特异性规则的链接.我的任务是尝试查看一个浏览器引擎在将一个CSS规则应用于另一个时的想法!并且因为它已经计算了这个信息以决定哪个规则覆盖其他规则,所以它应该是可访问的信息,但我不知道如何？

我面临的问题的一个非常基本的例子:

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }

或者它可以像这样编码....(在最终结果中没有任何不同.)

.testClass1 .title { corresponding CSS styles }     --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles }  --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles }  --- call it Rule …

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

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

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

我很好奇为什么使用>或其他组合器不会影响CSS选择器的特异性,即为什么div span(匹配div 内某处的span)和div > span(匹配div 的直接子节点)在特异性方面被认为是相等的.

我确实意识到组合子的使用与特异性完全无关,但我想知道它是否有某种原因.

如果我想增加规则的CSS特性,我倾向于加上前缀html,但我想知道是否有更简洁的方法来做到这一点？

(这可能看起来像一个微不足道的问题,但在我定义响应网格的样式表的过程中,通过单个字符减少特异性前缀将节省几百个字节)