Question

我在外部文件中有一个CSS类

.notification
{
background:lightgreen;
}

我在我的应用程序中使用此css选择器，我需要编辑此类，因为它是由 kickstart（ToolKit ）提供的。

但是我需要为这个css选择器添加一个属性。这样做的最佳方式是什么？

我计划在我的外部文件中

.notification
{
color:green;
}

现在将应用背景和颜色。这是正确的方法吗？

我不想使用内联css。

Answer 1

您可以使用与问题中显示的方法相同的方式向现有样式添加更多属性，而且您可以使用!important覆盖相同的css属性。

像这样：

.notification
{
   background:red !important;
   color:green;
}

因此，这会将background:red应用于元素而不是lightgreen。

Answer 2

如果您要添加

.notification
{
color:green;
}

在您自己的文件中，将应用color:red和background:lightgreen样式。这是因为cascading应用于单个样式属性，而不是整个class / id / tag样式定义。但是，如果您以自己的风格添加background:red，则会覆盖外部应用的lightgreen背景。（鉴于其相同的特性）

Cascading

Specificity

Answer 3

有几种方法。最好的是你提供给我们的那个。通过在文档中加载主文件旁边的文件中添加额外功能。

所以，让我们说首先使用css块加载app.css：

.notification
{
    background:lightgreen;
}

然后在您的文档中，假设您加载自定义文件custom.css。在custom.css中，这样做是合法的：

.notification
{
    color : green;
}

甚至

.notification
{
    background : blue;
}

获得同样效果的另一种方法是使用其他几个类作为“开关”。所以在示例中假设您有：

.greeFonts
{
    color : green;
}

.redFonts
{
    color : red;
}

然后在您的文档中，您可以执行以下操作：

<div class="notification greenFonts">My notification</a>

但是请注意，第二个解决方案无法更新所有预定义的类，这对于新的插入通知很有用。对于新建的网站，第二个解决方案很好，如果你想为“相同”的元素使用许多样式

将额外属性添加到CSS外部文件

3 个答案: