为单页设计覆盖全局 css

Question

我购买了HTML5单页设计网页模板，但作者不提供支持。只有一个 index.html 文件，其中的菜单按钮 link 用于在文件中进一步向下翻页锚点。该模板有一个 CSS 的全局部分，它在页面底部放置一组 z 索引图像，为模板提供整体主题。单击菜单按钮时，相应页面的内容（即 page_ABOUT、page_SERVICES）从左到右平滑地滑动到位，z 索引图像保持不变。它工作得很漂亮。 A LIVE DEMO CAN BE SEEN HERE

我的问题是我需要一个页面锚点是唯一的，因为它底部没有那些图像。如果我为该页面创建一个单独的 html 文件，效果就会被破坏，因为它不会像其他页面那样滑入到位；它会导致页面刷新。我的问题：是否可以覆盖 index.html 页面中一页锚点的全局 CSS，而不必为该页面创建单独的 html 文件？

放置这些图像的索引文件中的 HTML 是：

    <div class="add1"></div>
    <div class="add2"></div>
    <div class="add3"></div>
    <div class="add4"></div>
    <div class="add5"></div>
    <div class="add6"></div>

理想情况下，我希望一个特定的页面锚点不受那些 div 类.

的影响

唯一页面 (page_PRODUCTS) 包含在这些 div 标签中：

 <li id="page_PRODUCTS">

                  <div class="slogan"></div>

                  <div class="box">
                  <div class="relative">
                  <div class="scroll">
                  </div></div></div>

样式表的直接 link 是 HERE

Answer 1

虽然它不会删除页面底部的图像，但这些样式应该可以使 "page_PRODUCTS" 页面在这些图像前面滑动

#content{z-index:auto;}
#page_PRODUCTS{z-index:50;}

为单页设计覆盖全局 css

Overriding global css for one-page design

css

overriding

global