Question

假设我有一些服务器端第三方库生成的标记（我无法更改该标记，因为它是第三方生成的）：

<div class="ICannotChangeThatClass">Awesome markup</div>

让我们说我想从其他第三方申请一些CSS，不修改选择器（因为它是第三方CSS）：

.MyAwesomeClass {
    /* Some awesome CSS stuff */
}

我可以使用纯CSS 将MyAwesomeClass应用于ICannotChangeThatClass 吗？我不知道这是怎么回事，但是有点像：

.ICannotChangeThatClass { use .MyAwesomeClass /* this is invalid CSS */ /* or maybe */ extend .MyAwesomeClass /* this is invalid CSS */ }

谢谢！

Answer 1

没有办法在纯css中执行此操作，只能使用css预处理器，如sass / less等。

有两种方法可以解决这个问题：

如果您可以控制生成的html，请将您的类添加到元素：<div class="ICannotChangeThatClass MyAwesomeClass ">Awesome markup</div>
在您的css中，定义一个与您要覆盖的类名称相同的类，并添加新的样式：
```
.ICannotChangeThatClass {
    //MyAwsomeClass code goes here
 }
```

Answer 2

如果你将css添加到课程中，它将最终合并为一个。除非您添加已存在的属性，否则不会覆盖它。

.ICannotChangeThatClass {
  /* Some awesome CSS stuff */
}

Answer 3

如果您将两个类应用于XMLHttpRequest cannot load http://websiteB.com/cgi-bin/my_save.py. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://websiteA.com' is therefore not allowed access.这样的元素，则这两个类都按照您给出的顺序应用（与specificity上的常规规则一起）。

否则，你可以查看像Sass或LESS这样的预处理器，它允许你扩展＆＃34;另外一个CSS类，在众多其他有用的功能中。

我强烈建议您使用预处理器 - 它们可以使CSS更容易编写，尤其是在大型项目中。

CSS：从另一个选择器导入/复制样式

3 个答案: