Using an existing style for all buttons without specifying it in the class attribute
I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.
In telerik.webblue.min.css
there are 2 styles, namely t-button
and t-state-default
. It is implemented on a button element like this:
<button class="t-button t-state-default" type="submit">Apply</button>
I don't want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn't work:
button,.t-button,.t-state-default{}
So all that I want to have in my markup is:
<button type="submit">Apply</button>
How would I do this?
UPDATE
When I view source this is what I see:
<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/2开发者_如何学C011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">
In Firebug when I select the button it shows the top most style for this button as:
button, .t-button, .t-state-default {
}
hbf.css (line 26)
This should work.
However, you could place all the styles from
.t-button,.t-state-default {}
into a single rule labeled
button {}
EDIT
I think I see the problem, based on your update. (If I understand it correctly)
This
button, .t-button, .t-state-default {
}
appears in your hbf.css
However, it is styling nothing. button
is not able to reference the other styles that way.
The .t-button, .t-state-default
are still receiving styles from the telerik.webblue.min.css
stylesheet.
In order to make it work, you need to add button
to the telerik.webblue.min.css
stylesheet.
Updated:
button,
.t-button,
.t-state-default {
border: 1px solid red;
background: #ccc;
width: 100px;
height: 25px;
}
See Demo: http://jsfiddle.net/rathoreahsan/Q2JwE/
精彩评论