Question

考虑以下代码：

.foo {color: blue;}    /* added by Sally */
.foo {color: green;}   /* added by Karen */
.foo {color: yellow;}  /* added by Chad */

<div class="foo">text</div>

在这种情况下，单词text将显示为黄色，因为它是.foo类的最后一次迭代。

是否有任何方法可以使CSS恢复为.foo的先前定义，并以绿色呈现text（除了再次重新定义.foo之外）？

P.S。我意识到这是一个人为的示例，但这就是我要处理的代码库

Answer 1

您可以通过复制class））做一个简单的技巧

.foo{
  color: blue;
}   

.foo.foo{
  color: green; 
} 

.foo {
  color: yellow;
}

<div class="foo">Text</>

Answer 2

如果没有某种（至少是基本的）版本控制方法，那么您要解决的问题是无法解决的。这是超出CSS范围的。

一个简单的备份就意味着要有一个较旧的备份（乍得加入该项目之前）。
一个更现代的版本是git，您基本上可以按行，按日期，按作者查看和串联更改，并且无论如何您都可以将它们组合在一起。我的意思是健康。

但是，如果您没有任何恢复乍得所做更改的方法，则至少可以学习该课程。立即启动您选择的版本控制系统。
例如，您可以在单独的文件中进行更改并最后加载。

此解决方案具有两个主要优点：

可以通过更改文件加载顺序来更改更改顺序
一个人所做的所有更改都保存在一个文件中，并且当您尝试撤消该人所做的部分工作时，只需查看一下

要使其正常工作，您需要继续使用强度相同的选择器。

但是，与git所提供的相比，这没什么。
我可能应该提到，如果您确实有较旧的备份，则git允许您分别提交它们，然后为您提供合并工具，您可以在其中并排查看代码并确定要采用的方式。逐行。

Answer 3

您受小瀑布的摆布。

如果您有权访问html和CSS，则可以添加一个ID #foo选择器，它将覆盖类选择器。

或者，上帝禁止，只需将其设为!important

如果您需要在某个时候恢复为黄色，那么您将不得不变得更有创造力（例如JS）。

Answer 4

作为替代方法，而不是复制类，您可以在想要的特定类中添加更多的特异性。

在示例中为绿色： .foo {color: green;} /* added by Karen */

请注意，.foo.bar类比单个.foo具有更大的权重。尽管.foo类仍按预期工作。

.foo {color: blue;}    /* added by Sally */
.foo.bar {color: green;}   /* added by Karen */ /* then you add another class */
.foo {color: yellow;}  /* added by Chad */

<div class="foo bar">text</div>

Answer 5

让我们了解一下我们试图击败的CSS规则：

当多个声明具有相同的特异性时，最后一个在CSS中找到的声明将应用于该元素。 ref

因此，与其重新使用foo的上一个迭代，Chad可以更详细地了解他对foo的使用。例如：

.foo {color: blue;}    /* added by Sally */
.foo {color: green;}   /* added by Karen */

.foo[class="foo"] {color: yellow;}  /* added by Chad */

<div class="foo">text</div>
<div class="foo ">text</div>

如何撤消CSS规则？

5 个答案: