0

对于样式表，如果有一种方法可以在样式表中关联类，那就太好了。例如，如果我有一个名为fruit的类和一个名为apple的类，如果我可以说苹果也是一种水果，那就太好了。

我知道这可以从 HTML 中完成：

<div class="apple fruit"></div>

但我必须每次都添加这个。仅在样式表方面呢？

<div class="apple"></div>
<div class="fruit"></div>

样式表（使用最少的编码）将苹果也是水果联系起来似乎更有意义。

可能的解决方案：

  • 只要有apple类，我就可以使用 javascript 添加类fruit。

  • 另一种解决方案可能是使用某种速记符号，然后编译样式表。

还有其他解决方案吗？也许更优雅？

4

7 回答 7

2 
.fruit, .apple {
    whatever: value;
}
于 2013-07-31T00:59:56.650 回答
1

如果你有规则

.fruit { color: green }

您始终可以在逗号后附加其他选择器：

.fruit, .apple { color: green }

这里没有真正的特征继承，只是重复。

于 2013-07-31T00:56:10.517 回答
0

查看http://lesscss.org/

我知道它有嵌套样式，应该适合您的需求。

于 2013-07-31T00:55:43.043 回答
0

您可以像这样在 CSS 文件中直接定义它：

.fruite, .apple, .raspberry {
  // styles for fruites
  font-weight: bold;
}

.apple {
  // special style for apples
  color: #0F0;
}

.raspberry {
  // special style for raspberries
  color: #F00;
}

现在，当你使用.apple这个元素时，它也是一个水果，并且具有来自苹果的特殊风格规则。你也可以使用.fruite并且元素只会是一个全局的结果。

于 2013-07-31T00:56:49.090 回答
0

使用第三方插件（如http://lesscss.org/ ）有很多方法可以实现这一点，但我认为我们可以实现这一点的最佳方法是规划 css 结构，即 OO 方式。

例如水果可能有一些共享属性，而苹果类会有一些区别。

.fruit { font-size: 12px, border:none}
.apple { color: red }

有一些有趣的文章写在这方面，具有挑战性的部分是计划它。谁愿意花额外的时间在 CSS 规划上，尤其是设计师在 UAT 期间突然冒出一些新想法，或者用户可能想在最后一刻更改设计，这可能会破坏整个结构。

http://www.vanseodesign.com/css/object-oriented-css/

http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/

于 2013-07-31T01:16:09.000 回答
0

你应该看看 CSS 预处理器（LESS、Sass、Stylus）。它们提供了扩展样式的方法，正如您所期望的那样。

输出 CSS

  .fruit, .apple, .orange {
    border: 2px solid green;
  }

  .apple {
    background-color: red;
  }

  .orange {
    background-color: orange;
  }

较少的

  .fruit {
    border: 2px solid green;
  }

  .apple {
    &:extend(.fruit);
    background-color: red;
  }

  .orange {
    &:extend(.fruit);
    background-color: orange;
  }

SASS 和手写笔

  .fruit {
    border: 2px solid green;
  }

  .apple {
    @extend .fruit;
    background-color: red;
  }

  .apple {
    @extend .fruit;
    background-color: orange;
  }
于 2013-07-31T01:16:32.237 回答
0

你真正能做的就是让事情“级联”。如果所有 .fruit 都有 .5em 填充，那么你就有了一个可重用的类。决定哪些东西可以重复使用是关键。现在，如果核果都是圆形的，那么您可以拥有一个可重复使用的 .stone-fuit 类。如果一些水果是红色的，那么你可以有 .red 或其他东西。两种思维方式之间存在着一场战斗。有些人害怕在他们的 HTML 中使用太多的类——但他们是一种快乐的媒介。我在 SASS 中经常使用变量 - 你可以查看 OOCSS。在这种情况下，您的规则和选择器可以读取：

CSS

.fruit {
    padding: .5em;
}

.stone-fruit {
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.red {
    background-color: red;
}

HTML

<div class="fruit stone-fruit red">red stone fruit</div>
于 2013-07-31T01:38:56.537 回答