CSS类可以继承一个或多个其他类吗？-Java 学习之路

637

我觉得自己作为网络程序员这么长时间并且不知道这个问题的答案我感到愚蠢，我实际上希望它是可能的，我只是不知道而不是我认为的答案（这是不可能的） .

我的问题是，是否有可能创建一个“继承”另一个CSS类（或多个）的CSS类 .

例如，假设我们有：

.something { display:inline }
.else      { background:red }

我想做的是这样的：

.composite 
{
   .something;
   .else
}

其中“.composite”类既显示内联又具有红色背景

28 回答

3

Less和Sass是CSS预处理器，它以有 Value 的方式扩展CSS语言 . 他们提供的众多改进中只有一个是您正在寻找的选项 . Less有一些非常好的答案，我将添加Sass解决方案 .

Sass有扩展选项，允许一个类完全扩展到另一个类 . 有关扩展的更多信息，请阅读in this article

回复于 2024-04-27T21:32:11+08:00
0

正如其他人所说，您可以向元素添加多个类 .

但这不是重点 . 我得到你关于继承的问题 . 真正的一点是，CSS中的继承不是通过类完成的，而是通过元素层次结构完成的 . 因此，要模拟继承的特征，您需要将它们应用于DOM中不同级别的元素 .

回复于 2024-04-27T21:32:11+08:00

你能做的最好的就是这个

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

回复于 2024-04-27T21:32:11+08:00

1
您可以将多个类添加到单个DOM元素，例如
```
<div class="firstClass secondClass thirdclass fourthclass"></div>
```
继承不是CSS标准的一部分 .
回复于 2024-04-27T21:32:11+08:00

263

在Css文件中：

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

回复于 2024-04-27T21:32:11+08:00

1
遗憾的是，CSS并不像C，C＃或Java这样的编程语言那样提供“继承” . 你不能声明一个CSS类，然后用另一个CSS类扩展它 .

但是，您可以将多个类应用于标记中的标记...在这种情况下，有一组复杂的规则可确定浏览器将应用哪些实际样式 .
```
<span class="styleA styleB"> ... </span>
```
CSS将根据您的标记查找可以应用的所有样式，并将这些多个规则中的CSS样式组合在一起 .

通常，样式是合并的，但是当出现冲突时，后面声明的样式通常会获胜（除非在其中一个样式上指定了！important属性，在这种情况下获胜） . 此外，直接应用于HTML元素的样式优先于CSS类样式 .
回复于 2024-04-27T21:32:11+08:00

如果您通过php预处理.css文件，您可以实现您想要的 . ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

回复于 2024-04-27T21:32:11+08:00

-5
不，你不能做类似的事情
```
.composite 
{
   .something;
   .else
}
```
这不是OO意义上的"class"名称 . .something 和 .else 仅仅是选择器 .

但是您可以在元素上指定两个类
```
<div class="something else">...</div>
```
或者你可能会研究另一种形式的继承
```
.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}
```
```
<div class="foo">
  <p class="bar">Hello, world</p>
</div>
```
段落backgroundcolor和颜色是从 .foo 样式的封闭div中的设置继承的 . 您可能必须检查确切的W3C规范 . inherit 无论如何都是大多数属性的默认值，但不适用于所有属性 .
回复于 2024-04-27T21:32:11+08:00

别忘了：

div.something.else {

    // will only style a div with both, not just one or the other

}

回复于 2024-04-27T21:32:11+08:00

0

还有SASS，你可以在http://sass-lang.com/找到 . 有一个@extend标签，以及一个混合型系统 . （红宝石）

它是LESS的竞争对手 .

回复于 2024-04-27T21:32:11+08:00
1
这在CSS中是不可能的 .

CSS中唯一支持的是比另一个规则更具体：
```
span { display:inline }
span.myclass { background: red }
```
具有“myclass”类的span将具有这两个属性 .

另一种方法是指定两个类：
```
<div class="something else">...</div>
```
“else”的风格将覆盖（或添加）“某事”的风格
回复于 2024-04-27T21:32:11+08:00
384
我意识到这个问题现在已经很老了但是，这里没什么了！

如果意图是添加一个暗示多个类的属性的类，作为本机解决方案，我建议使用JavaScript / jQuery（jQuery实际上没有必要，但肯定有用）

如果你有 .umbrellaClass "inherits"来自 .baseClass1 和 .baseClass2 你可以有一些准备就绪的JavaScript .
```
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
```
现在 .umbrellaClass 的所有元素都具有 .baseClass 的所有属性 . 请注意，与OOP继承一样， .umbrellaClass 可能有也可能没有自己的属性 .

这里唯一需要注意的是考虑是否有动态创建的元素在此代码触发时不存在，但也有简单的方法 .

但是，糟糕的css没有本机继承 .
回复于 2024-04-27T21:32:11+08:00
94
Perfect timing ：我从这个问题转到我的电子邮件，找到一篇关于Less的文章，这是一个Ruby库，其中包括：

由于 super 看起来就像 footer ，但是使用不同的字体，我'll use Less'的类包含技术（他们称之为mixin）告诉它也包括这些声明：
```
#super {
  #footer;
  font-family: cursive;
}
```
回复于 2024-04-27T21:32:11+08:00
50

你可以通过类似这个类=“其他东西”的东西将多个CSS类应用于一个元素

回复于 2024-04-27T21:32:11+08:00

将您的公共属性保持在一起并再次分配特定（或覆盖）属性 .

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

回复于 2024-04-27T21:32:11+08:00

10
给定示例的 SCSS 方式将是一些东西喜欢：
```
.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}
```
更多信息，请查看sass basics
回复于 2024-04-27T21:32:11+08:00
8
在特定情况下，您可以执行“软”继承：
```
.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }
```
这仅适用于将.composite类添加到子元素的情况 . 它是“软”继承，因为.composite中未指定的任何值都不会显着继承 . 请记住，简单地写“内联”和“红色”而不是“继承”仍然是更少的字符 .

以下是属性列表以及它们是否自动执行此操作：https://www.w3.org/TR/CSS21/propidx.html
回复于 2024-04-27T21:32:11+08:00
7
元素可以包含多个类：
```
.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>
```
而那就差不多了 . 我希望有一天能看到这个功能，以及类别名 .
回复于 2024-04-27T21:32:11+08:00
3
我遇到了同样的问题，并最终使用JQuery解决方案使它看起来像一个类可以继承其他类 .
```
<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>
```
这将找到类"composite"的所有元素，并将类"something"和"else"添加到元素中 . 所以像 <div class="composite">...</div> 这样的东西会像这样结束：
<div class="composite something else">...</div>
回复于 2024-04-27T21:32:11+08:00
2

如果你想要一个比LESS更强大的文本预处理器，请查看PPWizard：

http://dennisbareis.com/ppwizard.htm

警告网站真的很可怕，并且有一个小的学习曲线，但它非常适合通过宏构建CSS和HTML代码 . 我永远不明白为什么更多的网络编码人员不使用它 .

回复于 2024-04-27T21:32:11+08:00

虽然直接继承是不可能的 .

可以将一个类（或id）用于父标记，然后使用CSS组合器来改变它的层次结构中的子标记行为 .

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

我不建议使用像示例那么多的 Span ，但它只是一个概念证明 . 尝试以这种方式应用CSS时，仍然会出现许多错误 . （例如，更改文本修饰类型） .

回复于 2024-04-27T21:32:11+08:00

11

CSS并没有真正做你所要求的 . 如果您想编写具有该复合思想的规则，您可能需要查看compass . 它是一个样式表框架，看起来类似于已经提到的Less .

它可以让你做混合和所有这些好事 .

回复于 2024-04-27T21:32:11+08:00

有像LESS这样的工具，它们允许你在更高的抽象层次上组合CSS，类似于你描述的 .

少打电话给这些“Mixins”

代替

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

你可以说

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

回复于 2024-04-27T21:32:11+08:00

0
对于那些对上述（优秀）帖子不满意的人，你可以使用你的编程技巧来制作变量（PHP或其中任何一个）并让它存储多个类名 .

这是我能想到的最好的黑客 .
```
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>
```
然后将全局变量应用于您想要的元素而不是类名本身
```
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
```
回复于 2024-04-27T21:32:11+08:00
1
您可以通过以下方式实现类似继承的行为：
```
.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles
```
见http://jsfiddle.net/qj76455e/1/

这种方法的最大优点是模块化 - 您不会在类之间创建依赖关系（就像使用预处理器“继承”类时一样） . 所以关于CSS的任何变更请求都不需要任何大的影响分析 .
回复于 2024-04-27T21:32:11+08:00
47
我一直在寻找那种疯狂的东西，我只是想通过尝试不同的东西来解决它：P ......你可以这样做：
```
composite.something, composite.else
{
    blblalba
}
```
它突然对我有用:)
回复于 2024-04-27T21:32:11+08:00
4

实际上你作为附加模块做了什么 . 有关示例，请查看Better CSS in .NET上的此问题 .

查看Larsenal's answer on using LESS以了解这些附加组件的功能 .

回复于 2024-04-27T21:32:11+08:00

是的，但不完全是那种语法 .

.composite,
.something { display:inline }

.composite,
.else      { background:red }

回复于 2024-04-27T21:32:11+08:00

CSS类可以继承一个或多个其他类吗？

28 回答

相关问题