有什么想法为什么该代码无法正常工作？ 身体> *

Question

I am using jqtouch to make a mobile website. I am also implementing a gallery image slider within the website, however when the gallery is put where I need it (inbetween <div id="project_name" class="page"></div> , the images won't display.

After tinkering for hours, removing display: none; from jqtouch.css rule:

body > * {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
    min-height: 420px !important;
}

Makes the gallery work, but obviously means the website doesn't work. Any ideas why this is happening, what body > * does and how I can get over it?

Project is at http://djrb.co.uk/mobile/portfolio.php#home

Many thanks,

Rich

Answer 1

The selector body > * matches any element that is a child of body . The right-angle bracket is the child selector . The star matches any element .

You probably want to include a more specific selector for your gallery div and apply the appropriate styles in a separate declaration block. Something like this:

#project_name {
    /* properties */
}