jquery - 为什么我的 CSS 会被覆盖？

Question

我的 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">

Answer 1

jquery-ui.css 将自己的样式应用到 .tabs() 如果你想使用你自己的样式.. 删除它

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

或者你可以转到 jquery-ui.css 并将其设为空白