开发者

Why does blueprint css define a div.class and class with the same styling?

开发者 https://www.devze.com 2023-02-01 21:01 出处:网络
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 t

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消