问题标签 [css-specificity]

据我了解，元素是最不具体的。（元素与 ID）。请帮助我理解选择器的特殊性。

http://jsfiddle.net/t2RRq/

我的样式表中有两条相互竞争的规则：

这是相关的HTML：

为什么是#child蓝色而不是红色？

我不确定我是否正确应用了评分系统。我是这样做的：

• 规则 #1 有一个 id 和一个标签，所以它的分数是[0, 1, 0, 1]
• 规则 #2 只有一个 id，所以它的分数是[0, 1, 0, 0]
• 因此规则 #1 获胜，它是蓝色的

但这对我来说似乎是错误的——第一条规则匹配多个元素；第二条规则只能匹配一条！那么第二条规则不是更具体吗？

可能的重复：
CSS 特异性点

这是我的意思的一个例子：

http://jsfiddle.net/BTJXt/9/

不知何故，1 ID 将击败看似无限数量的类。这是如何计算的？

当我在不透明度中遇到特异性冲突时，我正在设计一个导航栏按钮。我使用了 !important 覆盖，但这似乎不起作用。关于原因的任何线索？

HTML：

CSS：

在这之后，我得到的只是一个空白的灰色背景（由于背景颜色样式）。我知道不将跨度嵌套在 div 中更有意义，但出于动画目的，我需要这样做。

我有两个相互遵循的 CSS 规则：

这是 HTML 片段：

它们都应该应用于同一个表格单元格。没有类的那个是一个后备。但出于某种原因，它总是选择第一条规则而不是第二条规则。我知道第二个有效，因为如果我在 Firebug 中禁用第一个，它将使用它。

我在这里想念什么？

这是一个非常简单的 CSS 特异性问题，但我真的无法以某种方式弄清楚。

在我的样式表中，我有一个从列表中删除列表样式的简单规则：

然后，对于某些列表，我想指定一个列表样式，但无论如何，它不会覆盖上述规则？

问题是 UL 经常会被输入到 CMS 中的 WYSIWYG 框中，我不想强​​迫用户必须用 html 编写并给 UL 一个特定的 ID，所以我们经常会得到这样的代码作为：

我有点惊讶这不起作用，除了使用 javascript 给 $('#product ul') 一个特定的类或 css 样式之外，没有办法解决这个问题吗？

--

JSBIN：http: //jsbin.com/ohuzuz/4

--

编辑：哎呀，对不起，我有：

jsbin 中的一个临时错误，但不是我的原始代码。我的错误，但问题确实是无效的

我正在重新设计我的博客，考虑到响应式网页设计和“移动优先”方法 - 简而言之，我正在尝试使用最小宽度来避免任何类型的复制或 css .. 没有显示：无等。

我的问题是，当我确实需要覆盖 CSS 值时，较低的最小宽度优先。例子：

我希望当我在 600 像素及以上的分辨率下获得 2.2em h2，但我得到 1.7em。在我的开发工具中，我看到 2.2em 声明在那里，但另一个优先。 . 这没有意义！

我可以在不使用更强的选择器或最大宽度的情况下继续使用最小宽度并有效地覆盖更高分辨率的声明吗？

为什么这两个不相等？第一个显示绿色行，而第二个没有。唯一的区别在于 html c 此外，nth-child 选择器的特殊性是什么？

-对-

我已将给定的 CSS 文件/字符串解析为 JSON 对象，如下所示：

我现在要做的是根据具体性重新排序它们。在这种情况下，#header h1应该h1在 JSON 对象中的 之后，因为这是在浏览器中应用它们的方式。

我怎样才能做到这一点？是否有任何现有的图书馆？或者任何有用的库来帮助解决这个问题？

我可以同时使用 Javascript/jQuery 或 PHP 来执行此操作。我正在寻找实施建议，希望这已经完成！

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

这是一个例子：

在我遇到这个 CSS 之前，上述内容一直运行良好：

这被重新排序为：

但是，这不是浏览器应用 CSS 的方式。

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

更新

我认为我应该做的是在我的比较函数中，我应该总是添加一个额外的点，10因为特异性不仅仅基于选择器，它也基于选择器的顺序。所以是这样的：

这看起来如何，我如何确定在这种情况下要给出的分数！？