2014-12-08 130 views
4

我的CSS被称为ppcss.css,但在我拥有3个jquery链接之后,它覆盖了我的CSS并使我的页面看起来不同。任何人都可以帮我解决这个问题吗?修改或更改解释我的代码。谢谢。为什么我的CSS被覆盖?

$(function() { 
 

 
    $("#tabs").tabs(); 
 

 
    });
body { background-color:#00BFFF;} 
 
\t \t 
 
    div#header { width:auto; 
 
\t \t \t height:75px; 
 
\t \t \t background-image:url('banner.gif'); 
 
\t \t } \t 
 
    h1{ color:white; 
 
\t \t \t text-align:center; 
 
\t \t \t font-size:1.8em; 
 
\t \t \t 
 
\t \t \t } 
 
    h3{ color:white; 
 
\t text-align:center; 
 
\t font-size:1em; 
 
\t \t \t 
 
\t \t \t } 
 
    
 
    div#wrapper{width:1200px; 
 
\t \t \t background-color:#fff; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t } \t 
 
\t \t 
 
    h1.head,h3.subhead{font-family:georgia,serif; 
 
\t \t \t \t \t margin-left;20px;} 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
    \t \t \t \t \t \t 
 
    h1.head{font-size;2.25em; 
 
\t \t padding-top:15px; 
 
\t \t 
 
\t } 
 
    h3.subhead{ margin-top:-20px; 
 
\t \t \t letter-spacing:1px; 
 
\t \t } 
 
    ul#navlist li{ display:inline; 
 
\t \t \t list-style-type:none; 
 
\t \t \t padding-right:30px;} 
 
    ul#navlist{ \t \t \t 
 
\t \t \t background-color:#ADFF2F; 
 
\t \t \t margin-top:.99px; 
 
\t \t \t margin-bottom:1.99px; 
 
\t \t } 
 
    ul#navlist a{ \t \t \t 
 
\t \t \t text-decoration:none; 
 
\t \t \t font-size:1.5em; 
 
\t \t } \t \t 
 
    ul#navlist a:hover{ \t color:red; \t \t 
 
\t \t \t 
 
\t \t } \t 
 
\t 
 
    div#leftcol{ float:left; 
 
\t \t \t width:180px; 
 
\t \t \t margin-left:2px;} 
 

 

 
    div#maincol{float:left; 
 
\t \t width:500px; 
 
\t \t \t margin-left:15px; 
 
\t \t \t margin-right:15px; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    div#maincol h5{font-size:85%; 
 
\t \t \t line-height:1.25em; 
 
\t \t \t text-align:center; 
 
\t \t \t margin-right:1px; 
 
\t \t \t font-family:arial, sans-serif; 
 
\t \t \t } 
 
\t \t \t 
 
    div#rightcol{ width:180px; 
 
\t \t \t \t float:right; 
 
\t \t \t \t margin-right:20epx; 
 
\t \t \t \t 
 
\t \t \t \t } 
 
    div#footer{ background-color:#ADFF2F; 
 
\t \t \t \t \t height:15px; 
 
\t \t \t \t \t clear:both;} 
 
    #home div.smfeature{width:180px; 
 
\t \t \t height:auto; 
 
\t \t \t border:thin solid red; 
 
\t \t \t margin-bottom:10px;} 
 
    #home div.smfeature h4 { font-family:arial,sans-serif; 
 
\t \t \t \t font-size:75%; 
 
\t \t \t \t color:brown; 
 
\t \t \t \t background:#48D1CC; 
 
\t \t \t \t text-align:center; 
 
\t \t \t \t letter-spacing:2px; 
 
\t \t \t \t padding:.5em; 
 
\t \t \t \t 
 
\t \t \t \t margin-top:0px; 
 
\t \t \t \t margin-right:0px; 
 
\t \t \t \t } 
 
    div#searchbox2 { background-color:#7B68EE; 
 
\t \t \t \t \t text-align:center; 
 
\t \t \t \t \t } 
 
    div#links { width:150px; 
 
\t \t \t height:auto; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    a { text-decoration: none; 
 
\t } \t \t \t \t 
 
    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> 
 
\t 
 
\t <li><a href="ContactUs.html">Contact us</a></li> 
 

 
    </ul> 
 
    <div id="home"> 
 
\t <div id="wrapper"> 
 
\t <!-- header --> 
 
\t <div id="header"> 
 
\t <h1 class="head"> Underwater World </h1> 
 
\t <h3 class="subhead"> 
 
\t A New World! 
 
\t </h3> 
 
\t </div> 
 
\t 
 
\t \t 
 
\t <!-- left column --> 
 
\t <div id="leftcol" > 
 
\t 
 
\t <div class="smfeature"> 
 
\t <h4> Who we are. </h4> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="smfeature">

+4

尝试添加小提琴,这将鼓励人们来回答你的问题。 – 2014-12-08 04:12:06

+0

@PrashantKumar如何添加小提琴? – 2014-12-08 04:14:07

+0

使用此链接http://jsfiddle.net/并添加您的代码.. – vijaykumar 2014-12-08 04:17:45

回答

1

jQuery的ui.css申请了自己的风格,以.tabs()如果你想用你自己的风格..删除此

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

,或者你可以去到jquery-ui.css并使其变为空白

+0

我已经做了5次,它并没有解决它。如果我反转它,所有标签都会消失! :( – 2014-12-08 04:24:42

+0

我更新我的答案 – 2014-12-08 04:28:05

+0

你可以去jquery-ui.css并使其空白 – 2014-12-08 04:46:01

0

您可以在FireFox或其自己的开发人员检查器(右击,检查元素)中使用CSS Viewer等插件了解哪些样式影响每个元素以及它们所在的样式表。

然后,您可以在自己的样式表中覆盖默认样式表中的任何属性,方法是在默认的js插件样式表之后包含它(指向样式表的链接),并在相关属性中使用!important语句:

.elementClass { 
border: 1px !important; 
} 
0

你必须把你的css后jquery-ui.css。同样在你的CSS你必须覆盖所有由jquery-ui.css设置的属性。例如,通过CSS加载jquery-ui.cssul li到是 -

-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; 

所以,你必须覆盖所有。

我还注意到,您没有在您的ul中设置编号navlist。所以你的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"> 
 
    \t A New World! 
 
    \t </h3> 
 
      </div> 
 

 

 
      <!-- left column --> 
 
      <div id="leftcol"> 
 

 
      <div class="smfeature"> 
 
       <h4> Who we are. </h4> 
 

 
      </div> 
 

 
      <div class="smfeature">

0

简单的解决方法将增加CSS-specifities。例如,我已将每个ul选项卡属性更新为'html body #tabs> ul [role = tablist]',它现在将尊重您的新规则。

$(function() { 
 

 
    $("#tabs").tabs(); 
 

 
    });
body { background-color:#00BFFF;} 
 
\t \t 
 
    html body div#header { width:auto; 
 
\t \t \t height:75px; 
 
\t \t \t background-image:url('banner.gif'); 
 
\t \t } \t 
 
    html body h1{ color:white; 
 
\t \t \t text-align:center; 
 
\t \t \t font-size:1.8em; 
 
\t \t \t 
 
\t \t \t } 
 
    html body h3{ color:white; 
 
\t text-align:center; 
 
\t font-size:1em; 
 
\t \t \t 
 
\t \t \t } 
 
    
 
    html body div#wrapper{width:1200px; 
 
\t \t \t background-color:#fff; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t } \t 
 
\t \t 
 
    html body h1.head,html body h3.subhead{font-family:georgia,serif; 
 
\t \t \t \t \t margin-left;20px;} 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
    \t \t \t \t \t \t 
 
    html body h1.head{font-size;2.25em; 
 
\t \t padding-top:15px; 
 
\t \t 
 
\t } 
 
    html body h3.subhead{ margin-top:-20px; 
 
\t \t \t letter-spacing:1px; 
 
\t \t } 
 
    html body #tabs > ul[role=tablist] li{ display:inline; 
 
\t \t \t list-style-type:none; 
 
\t \t \t padding-right:30px;} 
 
    html body #tabs > ul[role=tablist]{ \t \t \t 
 
\t \t \t background-color:#ADFF2F; 
 
\t \t \t margin-top:.99px; 
 
\t \t \t margin-bottom:1.99px; 
 
\t \t } 
 
    html body #tabs > ul[role=tablist] a{ \t \t \t 
 
\t \t \t text-decoration:none; 
 
\t \t \t font-size:1.5em; 
 
\t \t } \t \t 
 
    html body #tabs > ul[role=tablist] a:hover{ \t color:red; \t \t 
 
\t \t \t 
 
\t \t } \t 
 
\t 
 
    html body div#leftcol{ float:left; 
 
\t \t \t width:180px; 
 
\t \t \t margin-left:2px;} 
 

 

 
    html body div#maincol{float:left; 
 
\t \t width:500px; 
 
\t \t \t margin-left:15px; 
 
\t \t \t margin-right:15px; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    html body div#maincol h5{font-size:85%; 
 
\t \t \t line-height:1.25em; 
 
\t \t \t text-align:center; 
 
\t \t \t margin-right:1px; 
 
\t \t \t font-family:arial, sans-serif; 
 
\t \t \t } 
 
\t \t \t 
 
    html body div#rightcol{ width:180px; 
 
\t \t \t \t float:right; 
 
\t \t \t \t margin-right:20epx; 
 
\t \t \t \t 
 
\t \t \t \t } 
 
    html body div#footer{ background-color:#ADFF2F; 
 
\t \t \t \t \t height:15px; 
 
\t \t \t \t \t clear:both;} 
 
    html body #home div.smfeature{width:180px; 
 
\t \t \t height:auto; 
 
\t \t \t border:thin solid red; 
 
\t \t \t margin-bottom:10px;} 
 
    html body #home div.smfeature h4 { font-family:arial,sans-serif; 
 
\t \t \t \t font-size:75%; 
 
\t \t \t \t color:brown; 
 
\t \t \t \t background:#48D1CC; 
 
\t \t \t \t text-align:center; 
 
\t \t \t \t letter-spacing:2px; 
 
\t \t \t \t padding:.5em; 
 
\t \t \t \t 
 
\t \t \t \t margin-top:0px; 
 
\t \t \t \t margin-right:0px; 
 
\t \t \t \t } 
 
    html body div#searchbox2 { background-color:#7B68EE; 
 
\t \t \t \t \t text-align:center; 
 
\t \t \t \t \t } 
 
    html body div#links { width:150px; 
 
\t \t \t height:auto; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    html body a { text-decoration: none; 
 
\t } \t \t \t \t 
 
    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> 
 
\t 
 
\t <li><a href="ContactUs.html">Contact us</a></li> 
 

 
    </ul> 
 
    <div id="home"> 
 
\t <div id="wrapper"> 
 
\t <!-- header --> 
 
\t <div id="header"> 
 
\t <h1 class="head"> Underwater World </h1> 
 
\t <h3 class="subhead"> 
 
\t A New World! 
 
\t </h3> 
 
\t </div> 
 
\t 
 
\t \t 
 
\t <!-- left column --> 
 
\t <div id="leftcol" > 
 
\t 
 
\t <div class="smfeature"> 
 
\t <h4> Who we are. </h4> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="smfeature">