问题标签 [css-specificity]

我的问题是关于背景图像。我正在为 iPhone 屏幕设计一个主页，我想为移动版本使用稍微不同的图像。我的媒体查询不在单独的 css 文件中，只是嵌入在 index.html 中。问题...主要的 CSS 图像覆盖了我的查询图像。我检查了额外的括号等。我认为媒体查询优先于主 css？如果我将媒体查询放在 css 链接文件中，我会得到我想要的结果吗？

这是我的主要css代码：

以下是我的媒体查询代码：

我只是偶然发现了 css 的特殊性，同时试图改变我的主题的分页风格。

我使用 twitter-bootstrap 作为基本模板，但我想更改分页。

具体来说，我想删除 will-paginate bootstrap 附带的分页边框：

将分页/引导

我只需要这个：

问题是，如果我在我的 custom.css.scss 文件中设置它，那么引导程序的特异性比我的更高（检查这个关于特异性的很好的解释）。我什至尝试使用！important，但它仍然没有让我的特异性更高。

我已经通过使用平等特异性规则解决了这个问题 - 最后一个，具有相同的特异性，是一个重要的，只是把：

但这只是无用的CSS，因为我根本不需要边框......

你有什么建议？

对于 div 中的文本框，我定义了上述样式。2 比 1 更具体，但渲染高度为 30px。它是如何工作的？

哪些类选择器规则对 10 分具有更高的特异性？

或者

HTML：

CSS：

这是一个演示问题的 JS 小提琴：http: //jsfiddle.net/UgkZY/

我原以为第一条规则会赢。5 x 类而不是 3 x 类 + 1 x 类型。然而，第二条规则胜出，因为 .AEF 似乎只得分为 1 级。

如果我使用下面的在线 CSS 特异性计算器http://specificity.keegan.st/，它认为第一条规则将获胜。实际上，在 Chrome 浏览器中，第二个获胜。

有人可以澄清一下 .ABC 在 CSS 特异性方面确实被认为只是一类吗？

顺便说一句，如果我在第一条规则中添加一个跨度选择器，它将胜出。

根据 CSS 规范，我认为第一个应该获胜。

http://www.w3.org/TR/selectors/#specificity

LI.red.level /* a=0 b=2 c=1 -> 特异性 = 21 */

我必须说非常令人困惑。

我从本教程中了解了选择器优先级。在一种情况下，我无法理解这种行为。我在 HTML 中有一个元素：

问题是来自另一个选择器的属性会覆盖类中的属性。

如上图所示，该类被不太具体的选择器覆盖。元素由 选择input[type="text"]，它不如类特定。我看到的这些行为背后的唯一原因是，.inputbox在确定优先级时也会计算类，即使它与元素不匹配。

为什么类型选择器会覆盖类选择器？

HTML：

CSS：

由于内联颜色样式的更高特异性，悬停颜色不会被应用。如果我给 div 一个 ID 并在 ID 样式中应用它们各自的颜色，也会出现同样的问题。我想在两个 div（或更多）之间共享悬停颜色定义，同时在非悬停时显示它们的独特颜色。如果没有大量多余的 css，这可能吗？

这是我的代码：

HTML

CSS

JavaScript

JSFiddle 代码在这里

因此，每当#corner:hover 时，CSS 都会使“#cornerbox”更改不透明度，并且只要按下问号 (?) 键，JavaScript 就会切换“#cornerbox”的类“显示”。

我注意到，如果我将上面的 CSS 更改为如下所示：

按下（？）键时不透明度不会改变，但“#cornerbox”接收类“show”。

所有其他可能性都有效。

这行得通。

这有效。

为什么？

先感谢您！

田濑

我目前正在详细阐述Nicole Sullivan 的 OOCSS 网格模块的变体，它只需要一个容器类来确定直接后代的布局。我知道这需要注意只能在支持 CSS3 的浏览器中工作。

这是差异的示例：

Vanilla OOCSS 网格规则：

我的简化网格规则：

另一个重要的警告是假设元素的小数大小完全由其兄弟元素的数量决定 - 而这是这段代码的基本点（以实现更精简的 HTML，而无需到处都有明确的大小），可能会有一些例外情况。有不成比例的宽度。

由于我的选择器的特殊性，我不能简单地将 OOCSS 模块重新插入：unitXofY在 HTML 中指定一个类将专门用于取代默认假设，但实际上我的选择器更强大，并且总是会覆盖指定的类.

我正在寻找的是在不限制特定性的实际效果的情况下取代这些选择器的最简洁或最优雅的方式。也就是说，除了它的类之外，它不能对所选元素做出任何不总是正确的假设。

正如你在这里看到的：

.wrapper-dropdown .label正在应用选择器，而不是更高的特异性.wrapper-dropdown .dropdown li div.liwrap:hover

这是为什么？如果相关的话，我在 osx 10.8 上使用 chrome

-编辑

这个少：http
://hastebin.com/feyurojusa.avrasm 编译成这个 css：http ://hastebin.com/dihimuquju.css

还有这个Jade：http
://hastebin.com/sipetaqigu.vhdl 编译到这个 html：http ://hastebin.com/sufavolumo.xml

Addtionally 我有这个小 JavaScript 处理点击事件：http ://hastebin.com/sufavolumo.xml

标记为css的几个答案不鼓励使用，!important以支持特异性。为什么？