我的CSS被称为ppcss.css，但在我拥有的3个jquery链接之后，它会覆盖我的CSS并使我的页面看起来不同。任何人都可以帮我解决这个问题吗？修改或更改代码以解释我。谢谢。
$(function() {
$( "#tabs" ).tabs();
});body { background-color:#00BFFF;}
div#header { width:auto;
height:75px;
background-image:url('banner.gif');
}
h1{ color:white;
text-align:center;
font-size:1.8em;
}
h3{ color:white;
text-align:center;
font-size:1em;
}
div#wrapper{width:1200px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
}
h1.head,h3.subhead{font-family:georgia,serif;
margin-left;20px;}
h1.head{font-size;2.25em;
padding-top:15px;
}
h3.subhead{ margin-top:-20px;
letter-spacing:1px;
}
ul#navlist li{ display:inline;
list-style-type:none;
padding-right:30px;}
ul#navlist{
background-color:#ADFF2F;
margin-top:.99px;
margin-bottom:1.99px;
}
ul#navlist a{
text-decoration:none;
font-size:1.5em;
}
ul#navlist a:hover{ color:red;
}
div#leftcol{ float:left;
width:180px;
margin-left:2px;}
div#maincol{float:left;
width:500px;
margin-left:15px;
margin-right:15px;
text-align:center;
}
div#maincol h5{font-size:85%;
line-height:1.25em;
text-align:center;
margin-right:1px;
font-family:arial, sans-serif;
}
div#rightcol{ width:180px;
float:right;
margin-right:20epx;
}
div#footer{ background-color:#ADFF2F;
height:15px;
clear:both;}
#home div.smfeature{width:180px;
height:auto;
border:thin solid red;
margin-bottom:10px;}
#home div.smfeature h4 { font-family:arial,sans-serif;
font-size:75%;
color:brown;
background:#48D1CC;
text-align:center;
letter-spacing:2px;
padding:.5em;
margin-top:0px;
margin-right:0px;
}
div#searchbox2 { background-color:#7B68EE;
text-align:center;
}
div#links { width:150px;
height:auto;
text-align:center;
}
a { text-decoration: none;
}
p a:hover{ color:red;} <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#home">Homepage</a></li>
<li><a href="animals.html">Animals</a></li>
<li><a href="Algae.html">Plants</a></li>
<li><a href="FAQS.html">F.A.Qs</a></li>
<li><a href="ContactUs.html">Contact us</a></li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol" >
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">
答案 0 :(得分：1)
jquery-ui.css将自己的样式应用于.tabs（），如果你想使用自己的风格..删除这个
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
或者您可以转到jquery-ui.css并将其设为空白
答案 1 :(得分：0)
您可以在FireFox中使用CSS Viewer等插件，或者使用自己的开发人员检查器（右键单击，检查元素）选项来了解影响每个元素的样式以及它们所在的样式表。
然后，您可以在默认样式表中覆盖默认样式表中的任何属性，方法是在默认的js插件样式表之后包含它（样式表的链接），并在相关属性中使用！important语句，例如：
.elementClass {
border: 1px !important;
}
答案 2 :(得分：0)
你必须在jquery-ui.css之后放置你的CSS。同样在你的css中你必须覆盖jquery-ui.css设置的所有属性。例如，ul li加载到jquery-ui.css的css是 -
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: url(http://code.jquery.com/ui/1.11.2/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png);
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(170, 170, 170);
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(170, 170, 170);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(170, 170, 170);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(170, 170, 170);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
color: rgb(33, 33, 33);
display: block;
float: left;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
height: 59.375px;
line-height: 22.8800010681152px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: -1px;
margin-left: 0px;
margin-right: 3.51999998092651px;
margin-top: 1px;
padding-bottom: 1px;
padding-left: 0px;
padding-right: 30px;
padding-top: 0px;
position: relative;
text-align: left;
top: 0px;
white-space: nowrap;
width: 194.53125px;
所以，你必须覆盖所有这些。
我还注意到您没有在navlist中设置ID ul。所以你的ul没有得到你写的css。我已经修改了你的片段了。它不完全正常，但它确实显示了你的CSS的效果。
$(function() {
$("#tabs").tabs();
});<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<style>
body {
background-color: #00BFFF;
}
div#header {
width: auto;
height: 75px;
background-image: url('banner.gif');
}
h1 {
color: white;
text-align: center;
font-size: 1.8em;
}
h3 {
color: white;
text-align: center;
font-size: 1em;
}
div#wrapper {
width: 1200px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
h1.head,
h3.subhead {
font-family: georgia, serif;
margin-left;
20px;
}
h1.head {
font-size;
2.25em;
padding-top: 15px;
}
h3.subhead {
margin-top: -20px;
letter-spacing: 1px;
}
ul#navlist li {
display: inline;
list-style-type: none;
padding-right: 30px;
}
ul#navlist {
background-color: #ADFF2F;
margin-top: .99px;
margin-bottom: 1.99px;
}
ul#navlist a {
text-decoration: none;
font-size: 1.5em;
}
ul#navlist a:hover {
color: red;
}
div#leftcol {
float: left;
width: 180px;
margin-left: 2px;
}
div#maincol {
float: left;
width: 500px;
margin-left: 15px;
margin-right: 15px;
text-align: center;
}
div#maincol h5 {
font-size: 85%;
line-height: 1.25em;
text-align: center;
margin-right: 1px;
font-family: arial, sans-serif;
}
div#rightcol {
width: 180px;
float: right;
margin-right: 20epx;
}
div#footer {
background-color: #ADFF2F;
height: 15px;
clear: both;
}
#home div.smfeature {
width: 180px;
height: auto;
border: thin solid red;
margin-bottom: 10px;
}
#home div.smfeature h4 {
font-family: arial, sans-serif;
font-size: 75%;
color: brown;
background: #48D1CC;
text-align: center;
letter-spacing: 2px;
padding: .5em;
margin-top: 0px;
margin-right: 0px;
}
div#searchbox2 {
background-color: #7B68EE;
text-align: center;
}
div#links {
width: 150px;
height: auto;
text-align: center;
}
a {
text-decoration: none;
}
p a:hover {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul id="navlist">
<li><a href="#home">Homepage</a>
</li>
<li><a href="animals.html">Animals</a>
</li>
<li><a href="Algae.html">Plants</a>
</li>
<li><a href="FAQS.html">F.A.Qs</a>
</li>
<li><a href="ContactUs.html">Contact us</a>
</li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol">
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">
答案 3 :(得分：0)
简单的解决方法是增加CSS特性。例如，我已将每个ul标签属性更新为＆＃; html body #tabs＆gt; UL [角色=标签列表]＆＃39;现在它将尊重你的新规则。
$(function() {
$( "#tabs" ).tabs();
});body { background-color:#00BFFF;}
html body div#header { width:auto;
height:75px;
background-image:url('banner.gif');
}
html body h1{ color:white;
text-align:center;
font-size:1.8em;
}
html body h3{ color:white;
text-align:center;
font-size:1em;
}
html body div#wrapper{width:1200px;
background-color:#fff;
margin-left:auto;
margin-right:auto;
}
html body h1.head,html body h3.subhead{font-family:georgia,serif;
margin-left;20px;}
html body h1.head{font-size;2.25em;
padding-top:15px;
}
html body h3.subhead{ margin-top:-20px;
letter-spacing:1px;
}
html body #tabs > ul[role=tablist] li{ display:inline;
list-style-type:none;
padding-right:30px;}
html body #tabs > ul[role=tablist]{
background-color:#ADFF2F;
margin-top:.99px;
margin-bottom:1.99px;
}
html body #tabs > ul[role=tablist] a{
text-decoration:none;
font-size:1.5em;
}
html body #tabs > ul[role=tablist] a:hover{ color:red;
}
html body div#leftcol{ float:left;
width:180px;
margin-left:2px;}
html body div#maincol{float:left;
width:500px;
margin-left:15px;
margin-right:15px;
text-align:center;
}
html body div#maincol h5{font-size:85%;
line-height:1.25em;
text-align:center;
margin-right:1px;
font-family:arial, sans-serif;
}
html body div#rightcol{ width:180px;
float:right;
margin-right:20epx;
}
html body div#footer{ background-color:#ADFF2F;
height:15px;
clear:both;}
html body #home div.smfeature{width:180px;
height:auto;
border:thin solid red;
margin-bottom:10px;}
html body #home div.smfeature h4 { font-family:arial,sans-serif;
font-size:75%;
color:brown;
background:#48D1CC;
text-align:center;
letter-spacing:2px;
padding:.5em;
margin-top:0px;
margin-right:0px;
}
html body div#searchbox2 { background-color:#7B68EE;
text-align:center;
}
html body div#links { width:150px;
height:auto;
text-align:center;
}
html body a { text-decoration: none;
}
html body p a:hover{ color:red;} <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#home">Homepage</a></li>
<li><a href="animals.html">Animals</a></li>
<li><a href="Algae.html">Plants</a></li>
<li><a href="FAQS.html">F.A.Qs</a></li>
<li><a href="ContactUs.html">Contact us</a></li>
</ul>
<div id="home">
<div id="wrapper">
<!-- header -->
<div id="header">
<h1 class="head"> Underwater World </h1>
<h3 class="subhead">
A New World!
</h3>
</div>
<!-- left column -->
<div id="leftcol" >
<div class="smfeature">
<h4> Who we are. </h4>
</div>
<div class="smfeature">