CSS中"Cascading"一词的确切含义是什么？我得到了不同的看法,所以我在这里问.一个例子会有所帮助.
如果该属性没有默认值,CSS中是否可以覆盖属性？
例如,假设您的主样式表定义了特定元素的边框:
#element {
border: 1px solid #000;
}
如果要从辅助样式表禁用边框,可以执行以下操作:
#element {
border: none;
}
假设辅助样式表在主要样式表之后加载,则border: none规则优先并删除边框.
但是,如果您尝试覆盖没有默认值或空值的属性,该怎么办？
#element {
position: absolute;
left: 0;
}
现在说,在你的辅助样式表中,你想要这样做:
#element {
right: 0;
top: 0;
}
你不想要任何价值left.没有这样的东西left: none;,所以...你如何"取消声明" left在主样式表中分配的属性？
标题已经说明了大部分内容。是否有一个 CSS 关键字可以!important在更高级别覆盖，或者在任何较新的 CSS 规范中是否计划有类似的功能？
当然，我知道这!important有点可能被菜鸟使用，而且在很多情况下这不是最好的方法，因为如果写得不好，样式表可能真的很糟糕。然而，有时它是有用的，甚至是必要的。
我能想到的 CSS 中最强大的样式是内联样式，!important如下所示：
<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>
现在假设我无法编辑 HTML，必须从外部样式表修改样式。
如果有这样的东西那就太好了：
#bluebeaver {
color: blue !important 2;
}
如果他们有级别，例如z-index.
是否有任何解决方案或计划使用新的 CSS 规范？到目前为止我还没有找到任何东西。
你能展示一个 CSS 解决方案来覆盖!important内联样式吗？还是绝对不可能？
我正在这里阅读一篇不错的文章:http://www.plus2net.com/html_tutorial/css-types.php 谷歌在搜索词css样式表优先级方面排名最高.但是我认为网站误导你并且不完整!有人可以证实我的怀疑吗？
1)用户定义的样式是第二低的优先级.要使用它覆盖其他样式,您需要使用!important将其移动到最高位置.2)在<link>中没有提到<link>与@import和@import的相对优先级
更准确的排序(1胜2负等):
Michael Bowers Pro CSS和HTML设计模式也是一个很好的来源.但它没有提到内联.
还有什么遗漏？
PS:我在推测!重要的是从2-8缺失.因此用户定义出现两次.一旦重要,第二次没有它.因此,用户定义实质上是第二低的.!important可以自然地应用于任何级别.
层叠动态样式表时，IE 中似乎存在错误。有谁知道是否有解决方法？考虑一下：
<head>
<style>#test{background:red;}</style>
</head>
<body>
<div id="test">test</div>
<script>
var link = document.createElement('link');
var style = document.getElementsByTagName('style')[0];
link.rel = 'stylesheet';
link.href = 'test.css';
style.parentNode.insertBefore(link, style);
</script>
</body>
注入的“test.css”包含#test{background:green}.
即使我们将 放在标签<link>之前<style>，IE7+ 也会使用注入的样式表覆盖样式并应用绿色作为背景。
FF/Chrome 以正确的方式执行此操作，并让样式标签优先于注入的链接标签，以便背景保持红色。
对于我正在开发的CSS框架,我正在使用all: unset,它本身工作正常:
#foo { all: unset; }
但是,在某些情况下,我想"撤消"此规则的效果,如
#foo:hover { all: auto; }
但是,这显然不起作用,因为没有autofor的价值all.取而代之的是,我们拥有的价值观inherit和initial,这不是"取消"的all属性,有不同的效果:恢复所有值父母的价值,或者他们最初的(我想这意味着系统级的默认值).
为了实现我想要的,我现在正在做
#foo:not(:hover) { all: unset; }
如果我想为多个伪类执行此操作,它可以正常工作,但是不太可伸缩,例如,我宁愿覆盖all: unset属性？有没有办法这样做？
我为我的网站制作了一组按钮,我需要一些专业的见解.
为了减少CSS膨胀,我想将我的按钮子类化为不同的颜色,ex .button.blue.
将来会出现以下问题吗？(假设我没有制作.blue的类)我是否必须使用像.button.button-blue这样的东西？
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
我简要介绍了CSS3选择器规范,但找不到任何解决这个问题的方法.另外,当你移动CSS声明时,我并没有想到这会改变它的结果,但确实如此.任何帮助都会很棒.
div.green_colour div.has_colour{
background-color: green;
}
div.red_colour div.has_colour{
background-color: red;
}<div class="red_colour">
<div class="green_colour">
<div class="has_colour">
I would like this to be green
</div>
</div>
</div>
<div class="green_colour">
<div class="red_colour">
<div class="has_colour">
I would like this to be red
</div>
</div>
</div>如果我有一个classic.css我想覆盖的文件(在这种情况下,它来自用于Python的Sphinx文档:https://docs.python.org/2.7/_static/classic.css)并且基本上是"撤消"规则,有办法做到这一点？
在这种情况下,有以下规则:
div.sphinxsidebar h3 {
font-family: 'Trebuchet MS', sans-serif;
color: #ffffff;
font-size: 1.4em;
font-weight: normal;
margin: 0;
padding: 0;
}
div.sphinxsidebar h4 {
font-family: 'Trebuchet MS', sans-serif;
color: #ffffff;
font-size: 1.3em;
font-weight: normal;
margin: 5px 0 0 0;
padding: 0;
}
我想做的就像是
div.sphinxsidebar h3,
div.sphinxsidebar h4
{
font-family: [revert-to-auto];
color: [revert-to-auto];
}
所以我可以指定字体系列和颜色,body并让它适用于所有地方,而不必使用!important.
只是为了澄清:我的custom.css开头@import(classic.css);是按照Sphinx文档开头的,而不是通常使用的两个<link rel="stylesheet" type="text/css">元素<head>.
我有一个由嵌套 UL 和 LI 组成的菜单，例如：
.wrapper > ul:first-child > li:last-child {
color: red;
}<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>我想向<li>第一个的最后一个添加样式<ul>，但不让它的子级（嵌套的<ul>）继承它。
我努力了：
.wrapper > ul:first-child > li:last-child {/*styles*/}
但这仍然对最后一个元素进行样式设置。
有人知道我如何才能只定位那 1 个元素（仅使用 CSS）吗？
有没有办法查看小部件应用了什么样式？在网站开发中， Chrome 开发工具中的“样式”选项卡显示了应用的样式以及样式如何级联，这对于调试页面非常有用。
Flutter中有类似的功能吗？
所以我一直在尝试研究一些隐藏和显示元素的类。当一个元素应该显示时，它应该从display:none;到display: whatever-it-was-before;。在研究如何做到这一点时，我偶然发现了看似完美的解决方案：CSS 的revert. 不幸的是，级联和继承级别 4 距离支持还有很长的路要走，而且 Windows 上的任何主要浏览器似乎都没有实现此功能。
为了说明我正在尝试做的事情，这里有一些 CSS：
.article-card {
display: flex;
}
._showdesktop {
display: none !important;
}
@media screen and (min-width: 1024px) {
._showdesktop {
display: revert !important;
}
}
以及一些随附的 HTML：
<div class="article-card _showdesktop">
...
</div>
这个想法是拥有可以在任何元素上使用的通用类，而不会覆盖元素的预期 CSS。这将使我要显示和隐藏的元素是display:flex;，display:block;，display:inline-block;，或display:inline;都具有相同的组类。
所以，我有两个问题：
visibility:hidden;，因为我几乎从不visibility在我的项目中使用该属性，但这不会从流程中删除元素，而且我想不出任何不会与其他代码冲突的方法来删除它.https://drafts.csswg.org/css-cascade/#default
更新：下面标记的答案和我现在要得到的一样好，但我想用我最终使用的代码更新这个问题。我不确定这会有多好，考虑到我经常使用 max-height，但希望它不会经常发生冲突：
._hidemobile,
._showtablet,
._showdesktop {
max-height: 0 !important;
visibility: …css-cascade ×12
css ×11
css3 ×2
javascript ×2
flutter ×1
html ×1
inheritance ×1
polyfills ×1
subclassing ×1
terminology ×1
widget ×1