问题标签 [css-cascade]

因此，以下内容适用于 Chrome，但不适用于 FireFox：

有没有办法禁用对容器元素的选择，但允许选择表单输入等内容？

请有人举一个例子来描述 CSS 中的级联，它们什么时候有用？我已经看到描述级联的答案以及级联和继承之间的区别，但我没有看到任何通过示例描述 CSS 级联的答案。

#sidebar p样式的特异性为 101（ID 为 100，标签选择器为 1），而.intro 样式的特异性为10（类选择器为 10 分）。由于 101 大于 10，所以 #sidebar p 优先。将 .intro 更改为 #sidebar .intro 会将其特异性更改为 110。

即使我改变了这一点，我的结果也不会到来

谁能给我解释一下。

输出：应该是红色，font-size-1.25em 和 font-family -Georgia

在这个例子中：

http://jsfiddle.net/Ja29K/

登录链接必须是蓝色的不合逻辑吗？

我知道声明具有相同的起源和相同的重要性，因此需要对它们进行评分（选择器的特异性）。

为了计算选择器的特异性，我为每个选择器创建了一个表：

A = 内联样式数：0
B = ID 数：0
C = 类数：0
D = 元素数：0

所以登录元素有3个与他的颜色相关的碰撞：a， #header a，#login

element (A, B, C, D)

a (0, 0, 0, 1) = 1
#header a (0, 1, 0, 1) = 101
#login (0, 1, 0, 0) = 100

选择器“#header a”获胜，因为它的得分最高。

但

如果我们将选择器 "#login" 更改为 "a#login"，我们将有：
a#login (0, 1, 0, 1) = 101
选择器 "#header a" 失败，因为平局赢得最后这是宣布的。

所以，我无法理解的是：

由于“#header a”选择器引用了许多元素，而 ID 选择器（例如 #login）只引用了一个元素，因此我们希望将 ID 选择器声明应用于该元素是合乎逻辑的，对吗？我真的无法理解这个 CSS 优先逻辑，因为我认为 ID 选择器基本上必须是最具体的东西，就像内联样式一样。

PS：对不起我的英语不好:)

我的 CSS3 媒体查询遇到了一些问题...

这是我目前正在研究的一个小片段：

我从“移动优先”的角度工作，并且考虑到 CSS 在“级联”方面的正常行为，我希望第二个@media语句继承前一个语句的所有样式，同时覆盖任何与之匹配的样式或“更重”的选择器。

（加上 CSS 的优先顺序意味着任何匹配的样式定义都将使用最后定义的规则集，除非用!important声明“胜过”！）

但从我所看到的情况来看，通过测试和一些 Google / SE 搜索，情况并非如此。

样式规则是否可以@media从适用的早期语句继承，或者我是否不得不重复每个语句所需的所有规则？（不是很干）

我真的很感激任何帮助和澄清/解释。

这是带有行号的 usersettings.css.erb 的一部分

但是，当我转到该页面时，它会呈现第一条规则而不是最后一条，当我检查时

html 是一个带有 .form-horizo​​ntal 的表单，它有一个 select_date 标签，用于选择用户生日的日期。rails 生成的 html 给出了日期编号 #user_birthday_3i

我错过了什么？

我正在帮助调试一个 CSS 问题，其中两个相同的选择器在两个相同配置的服务器之间以不同的顺序加载。一条规则从页面中定义的样式表加载，另一条规则通过注入样式表文件的 Javascript 加载。

根据级联规则，当我阅读它们时，它应该归结为指定规则的顺序。问题似乎是一个竞争条件，但不清楚竞争条件的基础是什么。在 Chrome 的网络选项卡中，文件在两台服务器之间以相同的顺序列出；但是，当您深入到元素选项卡中的元素级别时，将首先列出在给定服务器上优先的规则。

当像这样加载时，是什么决定了 CSS 在两个元素之间“指定”的顺序？

我有以下（简化的）示例代码：（jsbin：http ://jsbin.com/cisahilido/1/edit?html,css,output ）

SCSS：

标记：

现在，当屏幕为 480 像素或更少时，我希望它.container具有红色背景。但是，它似乎总是有蓝色背景，直到 1024px 断点，它才没有背景。

为什么 max-width 样式会用较大的断点覆盖较小的断点？

所以我一直在努力研究一些隐藏和显示元素的类。当一个元素应该显示时，它应该从display:none;到display: whatever-it-was-before;。在研究实现这一点的方法时，我偶然发现了看起来完美的解决方案：CSS 的revert. 不幸的是，Cascading and Inheritance Level 4 距离得到支持还有很长的路要走，而且这个功能似乎没有在 Windows 上的任何主要浏览器中实现。

为了说明我想要做什么，这里有一些 CSS：

以及一些随附的 HTML：

这个想法是拥有可以在任何元素上使用的通用类，而不会覆盖元素的预期 CSS。display:flex;这将允许我显示和隐藏、display:block;、display:inline-block;或display:inline;所有具有相同类集的元素。

所以，我有两个问题：

1. 有没有为此提供任何polyfill？我尝试四处搜索，但不幸的是，由于版本控制系统，“revert”和“polyfill”这两个术语一起出现了很多。
2. 有没有其他方法可以用 CSS 做到这一点？我正在考虑使用visibility:hidden;，因为我几乎从不visibility在我的项目中使用该属性，但这不会从流程中删除元素，而且我想不出任何不会与其他代码冲突的方法来删除它.

https://drafts.c​​sswg.org/css-cascade/#default

更新：下面标记的答案和我现在得到的一样好，但我想用我最终使用的代码来更新这个问题。考虑到我确实经常使用最大高度，我不确定这将如何运作，但希望它不会经常发生冲突：

在片段上，第 3 个h2应该不受 css 的影响，那为什么会这样呢？