Why does blueprint css define a div.class and class with the same styling?
In the linked code for the blueprint CSS framework, there is a style defined for a div.class
selector and just the .class
selector. Isn't this redundant? Or is there a more subtle reason for defining the class with two selectors?
https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/grid.css (lines 229-235)
/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
margin-top:1.5em;
}
div.append-bottom, .appen开发者_运维问答d-bottom {
margin-bottom:1.5em;
}
Interesting question. I've not used Blueprint, but then if you choose to override either div.prepend-top
or .prepend-top
, only that selector's styles will be overridden.
That means doing this:
.prepend-top { margin-top: 1em; }
Will leave the styles for <div>
s with that class unaffected (still a 1.5-em top margin), because div.prepend-top
is a more specific selector and so will take precedence for <div>
elements.
And doing this:
div.prepend-top { margin-top: 1em; }
Will leave the styles for other elements with that class unaffected, because of the div
type selector. Likewise for the append-bottom
class.
Again I've not used Blueprint, but I think it has something to do with how it expects your HTML to be structured.
精彩评论