对所有按钮使用现有样式而不在类属性中指定它答案

【问题标题】：Using an existing style for all buttons without specifying it in the class attribute对所有按钮使用现有样式而不在类属性中指定它
【发布时间】：2011-08-10 12:11:38
【问题描述】：

我正在使用带有 Razor 引擎的 ASP.NET MVC 3 以及最新版本的 Telerik MVC 控件。

telerik.webblue.min.css中有两种样式，分别是t-button和t-state-default。它是在一个按钮元素上实现的，如下所示：

<button class="t-button t-state-default" type="submit">Apply</button>

我不想使用类属性来指定要使用哪些样式，我想在自己的样式表中指定所有按钮元素都必须使用这两种样式。我在样式表中尝试了以下内容，但它不起作用：

button,.t-button,.t-state-default{}

所以我想在我的标记中包含：

<button type="submit">Apply</button>

我该怎么做？

更新

当我查看源代码时，我看到的是：

<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">

在 Firebug 中，当我选择按钮时，该按钮的最顶部样式显示为：

button, .t-button, .t-state-default {
}

hbf.css (line 26)

【问题讨论】：

标签： css telerik telerik-mvc

【解决方案1】：

这应该可行。

但是，您可以放置来自

的所有样式

.t-button,.t-state-default {}

到单个规则标记

button {}

编辑

根据您的更新，我想我看到了问题所在。（如果我理解正确的话）

这个

button, .t-button, .t-state-default {
}

出现在你的hbf.css

但是，它没有任何样式。 button 无法以这种方式引用其他样式。

.t-button, .t-state-default 仍在接收来自telerik.webblue.min.css 样式表的样式。

为了使其工作，您需要将button 添加到telerik.webblue.min.css 样式表中。

【讨论】：

我不想复制粘贴样式，那就是重复？？它已经存在了，肯定有一种方法可以重用它或从中获取信息吗？
我明白了，@Brendan。正如我所说，您的原始代码应该可以工作。也许样式表中还有其他button 样式优先？将button,.t-button,.t-state-default{} 放在样式表的底部，看看它是否有效。
没有别的了。这是我唯一的风格。让我看看还有什么。
也许在head 部分的下面链接了另一个样式表？这也会有更高的优先级。
我查看了 Firebug，它是最顶级的风格。 Telerik 样式表首先加载，然后是我的样式表。

【解决方案2】：

更新：

button,
.t-button,
.t-state-default {
     border: 1px solid red;
     background: #ccc;
     width: 100px;
     height: 25px;
 }

查看演示：http://jsfiddle.net/rathoreahsan/Q2JwE/

【讨论】：

我想使用这些样式。我认为这样做会将它从 t-button 和 t-state-default 继承到 button 元素中。
将t-button, .t-state-default的样式放入button {}
那么就是重复，为什么要重复呢？？已经有了，参考一下？？
谢谢，但你还是不明白。我不想更改任何现有样式。样式就在那里，它们里面有规则我只想使用它们而不是定义任何新东西。
这只是一个示例，只需将button 与您现有的样式一起添加t-button, .t-state-default 就像这样button, t-button, .t-state-default { //existing style }