What does "body > *" mean in CSS?
I am trying to understand the CSS effects that jQTouch implements. http://www.jqtouch.com/
It has some CSS definitions that contain syntax like body > *
body > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-web开发者_运维问答kit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
}
body.fullscreen > * {
min-height: 460px !important;
}
body.fullscreen.black-translucent > * {
min-height: 480px !important;
}
body.landscape > * {
min-height: 320px;
}
body > .current {
display: block !important;
}
I have searched around for some time, but can't find any hint. Could someone explain it to me?
Does it imply animation?
body > * means "any direct child of the body tag", e.g. consider the following scenario
<body>
<h1>This will be affected by body > *</h1>
<div>
This also
<p>This will not be affected, because it is not a direct child</p>
</div>
</body>
The > means that only the following * (anything), which is the IMMEDIATE child of the body will be affected.
So body > * basically means every immediate child of the body tag. body * means all tags inside the body tag, no matter the level.
The > character is a match indicator and the * is the match being indicated.
So
body > *
means to match any child of Body.
http://www.w3.org/TR/CSS2/selector.html
* is a wildcard selector and simply matches all elements, so body > * will match all direct children of the body element.
body > * means "any element that is a direct child of the body element."
Compare this to body *, which means "any element that is a descendant of the body element." So this would also match the <a> element in <body><p><a>...</a></p></body>, for example.
* refers to all elements, and > means immediate child elements, so body > * means all immediate child elements of the body.
It's probably a hack of some kind to refer to a particular browser, though I'm not familiar with it.
加载中,请稍侯......
精彩评论