Question

我有一个没有错误的html和css文件。但问题是我不能隐藏我的身体滚动条除非我删除jquery。我不明白这里的问题，必须有某种方式解决这个问题。

HTML

<head>
    <title>OUZO</title>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="images/logo-4.ico">


<script src="jquery.nicescroll.js">
</script>

      <script>

$(document).ready(
function() {
$("#video-wrapper").niceScroll();
$("#news-wrapper").niceScroll();
$("#games-wrapper").niceScroll();
$("#music-wrapper").niceScroll();
}
);
</script>

</head>

<body>

  <nav align="middle">
    <ul>
        <li><a href="videos.html"><img src="images/video-menu.png" class="vid" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/video-menu-hover.png'"onmouseout="this.src='images/video-menu.png';"></a></li>
        <li><a href="#"><img src="images/news-menu.png" class="news" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/news-menu-hover.png'"onmouseout="this.src='images/news-menu.png';"></a></li>
        <li><a href="#"><img src="images/logo.png" class="home" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo.png';"></a></li>
        <li><a href="#"><img src="images/games-menu.png" class="games" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black;border-left:8px solid black;" onmouseover="this.src='images/games-menu-hover.png'"onmouseout="this.src='images/games-menu.png';"></a></li>
        <li><a href="#"><img src="images/music-menu.png" class="music" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black; border-left:8px solid black;" onmouseover="this.src='images/music-menu-hover.png'"onmouseout="this.src='images/music-menu.png';"></a></li>
    </ul>
</nav>

CSS

html, body{
    height: 100%;
    overflow: hidden;
}

li {
    display: inline;
    margin-right: .75em;
    padding: 2px;
    z-index: 1; 
}

ul {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    top: 0;
    border-bottom: 8px solid black;
    border-width: 100%;
    background-color: #d8d8d8;
    z-index: 1;
}

nav {
    margin-top: 4%;
}

Answer 1

始终在所有库css后加载您自己的CSS 。

最后加载的规则优先。

因此，例如，如果库样式表中的某些内容会影响正文，那么您的正文规则可能会超过它。
例如，jQuery UI将设置一些体型，例如font-size。如果他们的规则加载到您的规则之后，它将是最后加载并优先。

对于冲突，您需要检查浏览器开发工具样式检查器中的违规元素，以查看哪些特定规则有效以及它们位于页面中任何元素的位置（哪个文件）。然后，您可以在样式表中编写调整规则

由于JQuery

1 个答案: