将CSS从一个类复制到另一个类？
这似乎是一个非常基本的问题，但我似乎没有找到答案。 我知道可以一次为多个元素定义一个 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 现在继承了 element 1 的 css。 我尝试这样做的原因是因为我有一个为网站所有页面加载的 element1 的 css 定义。 然后，对于一个特定页面（加载主 css 文件及其自己的文件），我想使用 element1 中的样式并将其添加到其中。 我试图避免的是为网站上的所有页面加载 element2 的定义（包括那些甚至没有类 element2 的 element[s] 的页面）。
这可以完成吗？ 我意识到我可以使用 jQuery 轻松实现此目的（即 $(".element2").addClass(".element1");），但我想避免为我的 css 使用脚本。
谢谢！
This may seem like a very basic question but I did not seem to find an answer to it.
I know it is possible to define a css rule for more than one element at once as such:
.element1, .element2{
font-size:14px;
}
Is it possible, though, to do that exact same thing, but apply the css to element after the css for element1 has been defined? Something like this:
.element1{
font-size:14px;
}
/*later in the css... or in a separate file*/
.element2{
like:".element1";
font-weight:bold;
}
So that element2 now inherits the css of element one.
The reason I am trying to do this is because I have a css definition for an element1 that loads for all pages of the site. Then, for one particular page (that loads the main css file, along with its own) I would like to use the style from element1 and add to it.
What I am trying to avoid is loading the definition for element2 for all pages on the site (including those who don't even have element[s] with the class element2.
Could this be done?
I realize I could easily achieve this with jQuery (i.e. $(".element2").addClass(".element1");) but I would like to avoid using scripts for my css.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以使用：
whilehaving
，因此两个类都适用。 jQuery 足够智能，可以像这样添加类和删除类。
您还可以使用更高级的东西，例如允许混合的 SASS 。
You can use:
while having
and so both classes will apply. jQuery is smart enough to add classes and remove classes like this.
Also you can use something more advanced like SASS that alows mixins.
据我所知，不，仅靠 CSS 是不可能的。 您已经确定了实现目标的一种方法，我不得不建议这是更好的方法。
在 CSS 中，类只能从其父类继承，并且只有在
:继承; color:、background-color:、font-family:、font-size:等，不过我警告您，如果font-size<父级的 /code> 尺寸被描述为增大或减小，子级中的font-size也会发生变化。As far as I'm aware, no, this isn't possible with CSS alone. You've already identified one way of achieving your aims, and I'd have to suggest that it's the better way.
In CSS a class can only inherit from its parent, and then only if
<example-attribute>: inherit;(I've used this withcolor:,background-color:,font-family:,font-size:among others, though I warn you that if thefont-sizeof the parent a size described as an increase or decrease, thefont-sizewill change in the child, too.CSS 确实需要这个功能。 在元素级别指定多个类固然很棒，但与能够 go 不同：
.my_class { class:my_global_class; }能够让一个类使用另一个类的样式将非常强大。 它将把继承模型的这一部分移到它所属的 CSS 中，从而减少混乱的标记。
我现在正在开发一个网站，那里有很多不同的字体组合。 一些 h 和 p 标签看起来有所不同，具体取决于其页面和上下文。 必须让我们的字体系列字体列表必须存在于我们需要它们的每个类中，这真是一件痛苦的事情。 我希望能够做到这一点：
/* defualt for p tags */ p { font-family:Times, Arial, Helvetica; } /* exceptions */ .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 标签，那么我必须为每个例外添加一个“类”，这可能会很痛苦。 当多个开发人员在一个站点上工作时尤其如此。
CSS really needs this functionality. Specifying multiple classes at the element level is great, but not the same as being able to go:
.my_class { class:my_global_class; }Being able to have a class use styles from another class, would be very powerfull. It would move this part of the inheritance model into the CSS where it belongs, leaving less cluttered markup.
I'm working on a site right now, where we have lots of different combinations of fonts. Some h and p tags look different depending on their page and context. It's a real pain having to have our list of fonts for font-family having to exist in every class where we need them. I'd love to be able to do this:
/* defualt for p tags */ p { font-family:Times, Arial, Helvetica; } /* exceptions */ .arial {font-family:Arial, Times, Helvetica; } .segoe {font-family:Segoe, Arial, Helvetica; } .my-page1 p {class:arial;} .my-page2 p {class:segoe;}In the above, my list of fonts would exist in one central place and I can apply them where ever I want, purely in the CSS file. If I have 100 p tags in my site, then I have to add a "class" to each of them for those exceptions, which can be a pain. This is especially true, when you have multiple developers working on one site.
根据您的描述，您希望 .element1 在多个页面上可用并使用，但在一些特殊页面上，您希望实现 .element1 类的元素看起来不同，在您的示例中为粗体。
您得到的答案绝对是一种方法，并且肯定会起作用。 您还可以做的其他事情是在特殊页面上包含额外的 CSS。
例如，您可以有一个包含在所有页面中并包含 CSS 的 allpages.css：
然后您可以有一个名为 exceptes.css 的单独 CSS 文件，其中包含：
这可以工作，因为当为同一选择器定义多个规则时，规则为合并在一起。 使用这种技术，您不必修改 HTML 元素的类值。
From what you describe you want .element1 to be available and used on several pages, but on a few exceptional pages you want elements implementing the .element1 class to look different, in your example bold.
The answer you were given is definitely one approach and will definitely work. Something else you can do though is to include additional CSS on the exceptional pages.
For example you can have an allpages.css that is include in all pages and contains the CSS:
Then you can have a separate CSS file called exceptions.css that contains:
This works because when multiple rules are defined for the same selector the rules are merged together. Using this technique you wouldn't have to modify the class values for HTML elements.
类似于 http://lesscss.org/
中使用的语法
我希望你能在那里找到一些有用的员工
Syntax like that used in http://lesscss.org/
I hope you'll find some useful staff there