Let's say this is my CSS file below.
.redText{
color:#FF0000;
}
p{
font-weight:bold;
}
My goal is to make all of the paragraphs have bold and red text. Obviously I can just rewrite the color declaration again within the p 开发者_开发技巧rule, but in a larger CSS file that becomes a bit of a problem.
What I'm after is a syntax that lets me apply the redText class to the p rule right in the same CSS file (that is, I'm not after <p class="redText otherClass">blah</p>), rather, something similar to this
p{
font-weight:bold;
.redText;
}
Possible?
I don’t think it’s possible to do this using pure CSS. That’s why there are so many CSS processors like LESS that will let you write exactly what you want. This is an example taken straight from the LESS website:
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
Of course, with a processor you can’t use the source stylesheet directly anymore.
Not possible.
You can either:
- Put shared property values in rule-sets with group selectors (and duplicate selectors)
- Duplicate property values
- Make all applicable elements match the selectors for both (this is more common in the usecase of "I have two rule-sets with a class selector and want them both to apply to an answer, therefore
class="foo bar"
) - Write your styles in another language and transform them into CSS (e.g. LESS)
精彩评论