What does "body > *" mean in CSS?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-18 15:36 出处：网络

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 > *

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.

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.