问题标签 [css-cascade]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS中的“级联”是什么意思?
CSS中“级联”一词的确切含义是什么?我得到了不同的看法,所以我在这里问。一个例子会有所帮助。
javascript - 注入的链接样式表优先于 IE7+ 中的现有样式
级联动态样式表时,IE 中似乎存在错误。有谁知道是否有解决方法?考虑一下:
注入的“test.css”包含#test{background:green}
.
即使我们将标签放在标签<link>
之前<style>
,IE7+ 也会用注入的样式表覆盖样式并应用绿色作为背景。
FF/Chrome 以正确的方式执行此操作,并让样式标记优先于注入的链接标记,因此背景保持红色。
css - 隐藏 TD 的所有 div.class 孩子,然后显示第一个 div.class 孩子
据我所知,以下内容在理论上应该有效,但不是:
结果是,只要 small.attachments 元素没有 small.attachment 兄弟,它就会很好地显示,应用第一个子规则并覆盖 display:none 规则。
但是,当 TD 中有两个small.attachments元素时,一个接一个(在上面的示例中),两者都被隐藏,并且第一个子规则无效。
这是怎么回事?
PS:我在 Safari 和 Firefox 中测试过。
css - 不同级别的 CSS 以及彼此的优先级
我在这里阅读了一篇关于这个主题的不错的文章:http ://www.plus2net.com/html_tutorial/css-types.php 它在谷歌搜索词 css 样式表优先级中排名最高。但是我认为该网站误导您并且不完整!有人可以证实我的怀疑吗?
1) 用户定义样式是次低优先级。为了用它覆盖其他样式,您需要使用 !important 将其移至最高。2) 它没有提到 <link> 与 <link> 中的 @import 和 @import 的相对优先级
更精确的排序是(1 胜 2 等):
- 用户定义(浏览器首选项!重要 - [不是谷歌浏览器!])
- 内联样式表(HTML 节点上的样式属性)
- 内部样式表(<head> 中的<style>)
- 外部样式表 (@import)
- 外部样式表 (<link>)
- 外部样式表(@import inside <link>)
- 用户定义 - (浏览器首选项 - [不是 Google Chrome!])
- 浏览器默认值 - (随浏览器提供)
Michael Bowers Pro CSS & HTML Design Patterns也是一个很好的来源。但它没有提到内联。
还有什么遗漏吗?
PS:我在推断 !important 从 2-8 丢失。所以用户定义出现两次。一次重要,第二次不重要。所以用户定义本质上是第二低的。!important 自然可以应用于任何级别。
css - 基于样式表中的顺序的CSS特异性/优先级?
我简要查看了CSS3 选择器规范,但找不到任何解决此问题的方法。此外,当您移动 CSS 声明时,我没想到结果会发生变化,但确实如此。任何帮助都会很棒。
css - 如何禁用级联选项?
我有所有 div 的 css 选项
如何使用 id 制作myDiv
不会继承任何 CSS 选项的 div,除了#myDiv
.
css - 覆盖页脚小部件样式表中使用的 !important 属性
我有一个 twitter 小部件,它被加载到我页面的页脚中。问题是它在所有地方都使用 !important 属性。而且因为我的样式表都加载到了头部,小部件的样式表会自动覆盖我的任何样式表。
我真的必须在小部件下方的文档页脚中放置几个单独的样式来强制执行此操作。还是有更语义化的方法?
css - 我是否正确地继承了我的 CSS?
我正在为我的网站制作一组按钮,我需要一些专业的见解。
为了减少 CSS 膨胀,我想将我的按钮子类化为不同的颜色,例如.button.blue 。
以后会不会出现以下问题?(假设我不只创建一个 .blue 类)我是否必须改用 .button.button-blue 之类的东西?
css - 对奇怪的级联问题感到困惑
我的 CSS 有一些奇怪的问题。我使用 SMACSS 方法重构了来自 @chriscoyier 的一些代码以对其进行模块化。
如果我将 .ribbon.green 移动到 CSS 的底部,它不会被应用。这与功能区:之后和功能区:之前有关吗?
将其移至底部似乎在 jsFiddle 中可以正常工作,但在 Firefox 或 Chrome 中则不行。 http://jsfiddle.net/SkinnyGeek1010/cDWKe/1/
关于它为什么这样做的任何想法?有没有办法将 .ribbon.green 移到底部?这将使使用 mixin 更改“皮肤”变得更容易。
** 添加了 dropbox html **
http://dl.dropbox.com/u/1407764/www/stackoverflow/corner-ribbon/green_ribbon_example.html
css - 覆盖没有默认值的 CSS 属性
如果该属性没有默认值,是否可以在 CSS 中覆盖该属性?
例如,假设您的主样式表为特定元素定义了边框:
如果你想禁用辅助样式表的边框,你可以这样做:
假设第二个样式表是在第一个样式表之后加载的,则该border: none
规则将优先并删除边框。
但是如果你试图覆盖一个没有默认值或空值的属性呢?
现在说,在您的辅助样式表中,您想这样做:
而且您不希望left
. 没有这样的东西left: none;
,所以......你如何“取消声明”left
主样式表中分配的属性?