6

这似乎是一个非常基本的问题，但我似乎没有找到答案。我知道可以一次为多个元素定义一个 CSS 规则，如下所示：

.element1, .element2{
  font-size:14px;
}

但是，是否有可能做同样的事情，但是在定义 element1 的 css 之后将 css 应用于元素？像这样的东西：

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

所以 element2 现在继承了元素一的 css。我尝试这样做的原因是因为我有一个为站点的所有页面加载的 element1 的 css 定义。然后，对于一个特定页面（加载主 css 文件以及它自己的），我想使用 element1 中的样式并添加到它。我要避免的是为站点上的所有页面加载 element2 的定义（包括那些甚至没有元素 [s] 的类 element2.

这可以做到吗？我意识到我可以使用 jQuery（即）轻松实现这一点，$(".element2").addClass(".element1");但我想避免为我的 css 使用脚本。

谢谢！

4

5 回答 5

10

您可以使用：

<div class="element1 element2">

同时拥有

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

所以这两个课程都适用。jQuery 足够聪明，可以像这样添加类和删除类。

你也可以使用更高级的东西，比如允许mixins 的SASS 。

于 2009-07-31T09:22:53.203 回答
1

据我所知，不，仅靠 CSS 是不可能的。您已经确定了实现目标的一种方法，我不得不建议这是更好的方法。

在 CSS 中，一个类只能从它的父类继承，并且只有在<example-attribute>: inherit;（我已经将它与color:, background-color:,font-family:等一起使用过font-size:，但我警告你，如果font-size父类的大小被描述为增加或减少，font-size则在孩子身上，也是。

于 2009-07-31T09:24:59.920 回答
1

CSS 确实需要这个功能。在元素级别指定多个类很棒，但与能够去不同：

.my_class { 类：my_global_class; }

能够让一个班级使用另一个班级的样式，将是非常强大的。它将继承模型的这一部分移动到它所属的 CSS 中，从而减少混乱的标记。

我现在在一个网站上工作，我们有很多不同的字体组合。一些 h 和 p 标签看起来不同，具体取决于它们的页面和上下文。让我们的 font-family 字体列表必须存在于我们需要它们的每个类中是一件非常痛苦的事情。我很想能够做到这一点：

/* 默认为 p 标签 */
p { font-family:Times, Arial, Helvetica; }

/* 异常 */
.arial {font-family:Arial, Times, Helvetica; }
.segoe {font-family:Segoe, Arial, Helvetica; }

.my-page1 p {class:arial;}
.my-page2 p {class:segoe;}

在上面，我的字体列表将存在于一个中心位置，我可以将它们应用到任何我想要的地方，纯粹是在 CSS 文件中。如果我的站点中有 100 个 p 标签，那么我必须为每个例外添加一个“类”，这可能会很痛苦。当您有多个开发人员在一个站点上工作时尤其如此。

于 2010-08-25T20:48:40.520 回答
0

根据您的描述，您希望 .element1 在多个页面上可用和使用，但在一些特殊页面上，您希望实现 .element1 类的元素看起来不同，在您的示例中为粗体。

您得到的答案绝对是一种方法，并且肯定会奏效。您可以做的其他事情是在特殊页面上包含额外的 CSS。

例如，您可以拥有一个包含在所有页面中并包含 CSS 的 allpages.css：

.element1 {
    font-size: 14px;
}

然后，您可以拥有一个名为 exceptions.css 的单独 CSS 文件，其中包含：

.element1 {
    font-weight: bold;
}

这是因为当为同一个选择器定义了多个规则时，这些规则会合并在一起。使用这种技术，您不必修改 HTML 元素的类值。

于 2011-12-26T05:45:26.417 回答
0

类似http://lesscss.org/中使用的语法
我希望你能在那里找到一些有用的员工

于 2012-04-28T12:20:36.580 回答