Question

我的CSS文件中有一个带有几个属性的基础.base {}。我想只改变颜色和其他属性以保持相同。如何在其他类中继承这个基类？

Answer 1

CSS“类”不是OOP“类”。继承的作用相反。
DOM元素可以有许多类，可以直接或继承或以其他方式关联，这些类都将按顺序应用，覆盖先前定义的属性：

<div class="foo bar">

.foo {
    color: blue;
    width: 200px;
}

.bar {
    color: red;
}

div的宽度为200px，颜色为红色。

使用不同的类覆盖DOM元素的属性，而不是CSS类的属性。 CSS“类”是规则集，ids或标记可以用作规则集。

请注意，应用类的顺序取决于选择器的优先级和特异性，这是complex enough topic in itself。

Answer 2

正如其他人已经提到的，CSS中没有OOP继承的概念。但是，我一直在努力解决这个问题。

假设我有两个按钮，除背景图片网址外，所有其他属性都很常见。这就是我做到的。

/*button specific attributes*/
.button1 {
    background-image: url("../Images/button1.gif");
}
/*button specific attributes*/
.button2 {
    background-image: url("../Images/button2.gif");
}

/*These are the shared attributes */
.button1, .button2 {
    cursor: pointer;
    background-repeat: no-repeat;
    width: 25px;
    height: 20px;
    border: 0;
}

希望这有助于某人。

Answer 3

您可以使用所需的属性创建另一个类，并将此类添加到您的类属性中：

.classA
{
  margin: 0;
  text-align: left;
}

.classB
{
  background-color: Gray;
  border: 1px solid black;
}

<div class="classA classB">My div</div>

Answer 4

你不在css中继承，只需在元素中添加另一个类来覆盖值

.base{    
  color:green;
  ...other props
}

.basealt{
   color:red;
}

<span class="base basealt"></span>

Answer 5

我认为你可以在标签中使用多个类

例如：

<div class="whatever base"></div>
<div class="whatever2 base"></div>

所以当你想要改变所有div的颜色时，你可以改变.base

...我不知道如何在CSS中继承

Answer 6

这样的事情：

.base {
    width:100px;
}

div.child {
    background-color:red;
    color:blue;
}

.child {
    background-color:yellow;
}

<div class="base child">
    hello world
</div>

这里的背景是红色的，因为css选择器更具体，因为我们已经说过它必须属于div元素！

在此处查看此操作：jsFiddle

Answer 7

如前面的回复所述，它们在CSS中没有类似OOP的继承。但是，如果您想重用规则集以将其应用于某些内容的下降，更改属性，并且如果您可以使用LESS，请尝试 Mixins。要在OOP功能上继续，它看起来像composition。

例如，您想要应用文件中的.paragraph类＆＃34; text.less＆＃34;对于paragraphContainer的所有p子项，并将color属性从红色重新定义为黑色

text.less file

.paragraph {
    font: arial;
    color: red
}

在alternativeText.less文件中执行此操作

@import (reference) 'text.less';    
div#paragraphsContainer > p {
    .paragraph;
    color: black
}

your.html文件

<div id='paragraphsContainer'>
   <p>paragraph 1</p>
   <p>paragraph 2</p>
   <p>paragraph 3</p>
</div>

请阅读this answer多次定义相同的css属性

Answer 8

您还可以使用css的！important功能来制作您不想在原始类中覆盖的质量。我在我的网站上使用它来保留原始类的一些基本特征，同时覆盖其他类：

<div class="foo bar">
.foo {
color: blue;
width: 200px  !important;
}

.bar {
color: red;
width: 400px;
}

这将生成一个红色和200px的类“foo bar”元素。如果您单独使用其他两个类并且只想要每个类的一个片段，那么这非常棒。

Answer 9

您不需要添加额外的两个类（button button-primary），只需将子类（button-primary）与css一起使用，它将应用父css类和子css类。这是链接：

感谢Jacob Lichner！

继承CSS类

9 个答案: