继承 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5417356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inherit CSS class
提问by Damir
I have one base .base{} in my CSS file with couple properties. I want to change only color and other properties to stay same. How to inherit this base class inother classes ?
我的 CSS 文件中有一个基本的 .base{}，有几个属性。我只想更改颜色和其他属性以保持不变。如何在其他类中继承这个基类？
回答by deceze
CSS "classes" are not OOP "classes". The inheritance works the other way around.
A DOM element can have many classes, either directly or inherited or otherwise associated, which will all be applied in order, overriding earlier defined properties:
CSS“类”不是OOP“类”。继承以相反的方式工作。
一个 DOM 元素可以有许多类，可以是直接的，也可以是继承的，或者是关联的，它们都将按顺序应用，覆盖之前定义的属性：
<div class="foo bar">
.foo {
color: blue;
width: 200px;
}
.bar {
color: red;
}
The div will be 200px wide and have the color red.
div 的宽度为 200px，颜色为红色。
You override properties of DOM elements with different classes, not properties of CSS classes. CSS "classes" are rulesets, the same way ids or tags can be used as rulesets.
您可以使用不同的类来覆盖 DOM 元素的属性，而不是 CSS 类的属性。CSS“类”是规则集，就像 id 或标签可以用作规则集一样。
Note that the order in which the classes are applied depends on the precedence and specificity of the selector, which is a complex enough topic in itself.
回答by James Poulose
As others have already mentioned, there is no concept of OOP inheritance in CSS. But, i have always used a work around for this.
正如其他人已经提到的，CSS 中没有 OOP 继承的概念。但是，我一直为此使用解决方法。
Let's say i have two buttons, and except the background image URL, all other attributes are common. This is how i did it.
假设我有两个按钮，除了背景图片 URL，所有其他属性都是通用的。我就是这样做的。
/*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;
}
Hope this helps somebody.
希望这可以帮助某人。
回答by Martijn
You can create another class with the properties you want and add this class to your class attribute:
您可以使用所需的属性创建另一个类，并将此类添加到您的类属性中：
.classA
{
margin: 0;
text-align: left;
}
.classB
{
background-color: Gray;
border: 1px solid black;
}
<div class="classA classB">My div</div>
回答by redsquare
You dont inherit in css, you simply add another class to the element which overrides the values
您不在 css 中继承，您只需向覆盖值的元素添加另一个类
.base{
color:green;
...other props
}
.basealt{
color:red;
}
<span class="base basealt"></span>
回答by MangMang
i think you can use more than one class in a tag
我认为你可以在一个标签中使用多个类
for example:
例如：
<div class="whatever base"></div>
<div class="whatever2 base"></div>
so when you want to chage all div's color you can just change the .base
所以当你想改变所有 div 的颜色时，你可以改变 .base
...i dont know how to inherit in CSS
...我不知道如何在 CSS 中继承
回答by firefox1986
Something like this:
像这样的东西：
.base {
width:100px;
}
div.child {
background-color:red;
color:blue;
}
.child {
background-color:yellow;
}
<div class="base child">
hello world
</div>
The background here will be red, as the css selector is more specific, as we've said it must belong to a div element too!
这里的背景将是红色的，因为 css 选择器更具体，正如我们所说，它也必须属于一个 div 元素！
see it in action here: jsFiddle
在这里查看它的实际效果：jsFiddle
回答by groch
As said in previous responses, their is no OOP-like inheritance in CSS. But if you want to reuse a rule-set to apply it to descentants of something, changing properties, and if you can use LESS, try Mixins. To resume on OOP features, it looks like composition.
正如在之前的回复中所说，它们在 CSS 中没有类似 OOP 的继承。但是，如果您想重用规则集以将其应用于某些事物的后代、更改属性，并且如果您可以使用 LESS，请尝试Mixins。要继续使用 OOP 功能，它看起来像composition。
For instance, you want to apply the .paragraphclass which is in a file "text.less" to all p children of paragraphsContainer, and redefine the color property from red to black
例如，您想将.paragraph“text.less”文件中的类应用于paragraphsContainer的所有p个子项，并将颜色属性从红色重新定义为黑色
text.less file
无文本文件
.paragraph {
font: arial;
color: red
}
Do this in an alternativeText.less file
在alternateText.less 文件中执行此操作
@import (reference) 'text.less';
div#paragraphsContainer > p {
.paragraph;
color: black
}
your.html file
你的.html文件
<div id='paragraphsContainer'>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
Please read this answerabout defining same css property multiple times
请阅读有关多次定义相同 css 属性的答案
回答by Chirag
You don't need to add extra two classes (button button-primary), you just use the child class (button-primary) with css and it will apply parent as well as child css class. Here is the link:
您不需要添加额外的两个类（button button-primary），您只需将子类（button-primary）与 css 一起使用，它将应用父类和子 css 类。链接在这里：
Thanks to Jacob Lichner!
感谢雅各布·利希纳！
回答by Ryan Jarvis
You could also use the !important feature of css to make qualities you do not want to override in the original class. I am using this on my site to keep some of the essential characteristics of the original class while overriding others:
您还可以使用 css 的 !important 功能来制作您不想在原始类中覆盖的品质。我在我的网站上使用它来保留原始类的一些基本特征，同时覆盖其他类：
<div class="foo bar">
.foo {
color: blue;
width: 200px !important;
}
.bar {
color: red;
width: 400px;
}
This will generate a class "foo bar" element that is red and 200px. This is great if you are using the other two classes individually and just want a piece from each class.
这将生成一个红色和 200px 的类“foo bar”元素。如果您单独使用其他两个类并且只想要每个类的一部分，这很好。
