Home >Web Front-end >HTML Tutorial >Dear heroes, although two styles are defined below, style two includes style one. Please help to modify it_html/css_WEB-ITnose

Dear heroes, although two styles are defined below, style two includes style one. Please help to modify it_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:11:46981browse

各位大侠,以下虽然定义了两个样式,但样式二却包含了样式一了,也就是样式二的那个ff6d136ddc5fdfeffaf53ff6ee95f185除了执行样式二之外,还同时执行了样式一,我想让他们两个独立,不相互包容,怎么改呢?
样式一图
样式二图


样式一:不修改这里
46d5fe1c7617e3914f214aaf043f4ccf
ul{list-style-type:none;}
ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
ul li a:hover{border:2px solid #FF6701;margin:0px;}
.select{}
.select a{border:2px solid #FF6701;margin:0px;background:url(images/2010083011191628.gif) no-repeat no-repeat right bottom;}
531ac245ce3e4fe3d50054a55f265927

994af0471b7f24bb8a5e368279e1710a
85a3f488338bd4ea64d33b9abbb65c0f28005f15af468ab3f7bae64fb648e307红色5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

---------------------------------------------------------------------------------------------
样式二:这里跟上面重复样式,如何修改
46d5fe1c7617e3914f214aaf043f4ccf
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p,input,li{ padding:0; margin:0;}
ul,li{list-style-type:none;}
img { border:0;}

.clear{clear:both;line-height:1px;}

#con { margin:20px auto;}
#tags {width: 750px; height: 27px;position:relative;bottom:-3px;}
/* 切换风格start*/
#tags LI {background: url(../images/tab/tab_bg_left_02.gif) no-repeat left bottom; float: left; margin-right: 1px; margin-right: 6px;list-style:none; height: 24px}
#tags LI A {padding:0 20px 0 20px;background: url(../images/tab/tab_right_02.gif) no-repeat right bottom; float: left;color: #000; 
line-height: 24px;height: 24px; text-decoration: none;}
/* 切换风格end*/
#tags LI.emptyTag {background: none transparent scroll repeat 0% 0%; width: 4px;}
#tags LI.selectTag {background-position: left top; margin-bottom: -2px; position: relative;top:-2px; height: 27px;}
#tags LI.selectTag A {padding:0 20px 0 20px;background-position: right top; font-size:14px;color: #fff;font-weight:bold; line-height: 25px; height: 27px;}
#tags LI A p{position:relative;top:2px;}
#tagContent {border-top: #fa4e86 2px solid;}/*粉色02*/
.tagContent { display: none;}
#tagContent DIV.selectTag {display: block;}
531ac245ce3e4fe3d50054a55f265927

3847299850341653eb0448117c08851a
cb058c777ebfa130dc418ef82d6918ae
05ddf10907e7ce3fc18546e5d3757b4f96e22f9f36a45c1cb308ccdd3b7151a4e388a4556c0f65e1904146cc1a846bee商品介绍94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b14
05ddf10907e7ce3fc18546e5d3757b4f837aee3561f27c9ca78a181f065ce783e388a4556c0f65e1904146cc1a846bee评价详情94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b14
05ddf10907e7ce3fc18546e5d3757b4fd17b7ef19512d8628f3bf14664180262e388a4556c0f65e1904146cc1a846bee成交记录94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b14
793ab7d6fe4340f6ff69df0dcf61f429
45fbf43d0144c3554fd75ff3c1e2de5d
9eecc9ef4f19c03d861b65f787b9be6a1c997cec9f4b83324a7145373fde865ba
3d4a7c6b46337e57c2987048af5867082c997cec9f4b83324a7145373fde865ba
efc38ff6e40a8f251d2bfe754e0f0c073c997cec9f4b83324a7145373fde865ba
c997cec9f4b83324a7145373fde865ba
c997cec9f4b83324a7145373fde865ba


Reply to discussion (solution)

Is it the effect after clicking, what about js? Post it


100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
abab87ad76879aa9f1b2fbc276a2b137
da40191d1b09bef5f6c2ba75816992e5
6b05738e83f052990d84b48629c736602cacc6d41bbb37262a98f745aa00fbf0
0206f7e70943cf4dd471b033ebc237f62cacc6d41bbb37262a98f745aa00fbf0

26ca47c20c28df3ac03ed1bb412fcf54
9bc988c8d379612a3b235e5490d962db
 function selectTag(showContent,selfObj){
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
for(i=0; j=document.getElementById("tagContent" i); i ){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
2cacc6d41bbb37262a98f745aa00fbf0
ef0d2420b1e5291570a81009eee48a1a
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p,input,li{ padding:0; margin:0;}
ul,li{list-style-type:none;}
img { border:0;}
.clear{clear:both;line-height:1px;}
#con { margin:20px auto;}
#tags {width: 750px; height: 27px;position:relative;bottom:-3px;}
/* 切换风格start*/
#tags LI {background: url(http://www.heredc.com/js/tab/tab_bg_left_02.gif) no-repeat left bottom; float: left; margin-right: 1px; margin-right: 6px;list-style:none; height: 24px}
#tags LI A {padding:0 20px 0 20px;background: url(http://www.heredc.com/js/tab/tab_right_02.gif) no-repeat right bottom; float: left;color: #000; 
line-height: 24px;height: 24px; text-decoration: none;}
/* 切换风格end*/
#tags LI.emptyTag {background: none transparent scroll repeat 0% 0%; width: 4px;}
#tags LI.selectTag {background-position: left top; margin-bottom: -2px; position: relative;top:-2px; height: 27px;}
#tags LI.selectTag A {padding:0 20px 0 20px;background-position: right top; font-size:14px;color: #fff;font-weight:bold; line-height: 25px; height: 27px;}
#tags LI A p{position:relative;top:2px;}
#tagContent {border-top: #fa4e86 2px solid;}/*粉色02*/
.tagContent { display: none;}
#tagContent DIV.selectTag {display: block;}
531ac245ce3e4fe3d50054a55f265927


251c1b01074a5ceb7161cf14b717bdff
9bc988c8d379612a3b235e5490d962db
window.onload=function(){
 var size = new Select("size",{
 Radio :true ,
 OnClick:function(selected){
 document.form.size.value = selected.join(",")
 document.form.color.value='';
}
});
}
2cacc6d41bbb37262a98f745aa00fbf0

ef0d2420b1e5291570a81009eee48a1a
ul{list-style-type:none;}
ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
ul li a:hover{border:2px solid #FF6701;margin:0px;}
.select{}
.select a{border:2px solid #FF6701;margin:0px;background:url(http://www.heredc.com/js/2010083011191628.gif) no-repeat no-repeat right bottom;}
531ac245ce3e4fe3d50054a55f265927
dc62b2bc39172dced2681abbf21a27e7
9bc988c8d379612a3b235e5490d962db
$(function() {
$('#tabs').tabs();
});
2cacc6d41bbb37262a98f745aa00fbf0 
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
7094e246f36178352fbb292bfc029d66a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c
5152d529055cf1b7c477fd1f86bd4976
994af0471b7f24bb8a5e368279e1710a
52d86caf0a52d79a7dc28ea5b5e77f4f3d467a52a666af25e42b9781c620c685S5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
844abe4641e9963430327b9aa09ae5fea0696ff6efcac2d6383df83c0aae7a08X5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
427396527b1aab2b025ab315406c174b0ee3119d329bd84ac8c2a5ae3abd0385XL5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689


0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a


59f071ecc1bef99dfa868c0f6f12ac40
3847299850341653eb0448117c08851a
cb058c777ebfa130dc418ef82d6918ae
    05ddf10907e7ce3fc18546e5d3757b4f96e22f9f36a45c1cb308ccdd3b7151a4e388a4556c0f65e1904146cc1a846bee商品介绍94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b14
8c0e9d2c5e6a7ea41578d97b4d80f7d8837aee3561f27c9ca78a181f065ce783e388a4556c0f65e1904146cc1a846bee评价详情(3cb0b47faa3619cdd5f5430ec64da6bf0e6e38b3c62e8df885fe2e3986461aa63)94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b148c0e9d2c5e6a7ea41578d97b4d80f7d8d17b7ef19512d8628f3bf14664180262e388a4556c0f65e1904146cc1a846bee成交记录(3cb0b47faa3619cdd5f5430ec64da6bf50e6e38b3c62e8df885fe2e3986461aa63)94b3e26ee717c64999d7867364b1b4a363505a6f727f70c8bd4066f3066dcb9dcbf331b4cac0bfbcf2a714e444b23b14
793ab7d6fe4340f6ff69df0dcf61f429
45fbf43d0144c3554fd75ff3c1e2de5d
    9eecc9ef4f19c03d861b65f787b9be6a001c997cec9f4b83324a7145373fde865ba
6485734c8c62154d718a3095d0d3455c002c997cec9f4b83324a7145373fde865ba
f4f962b554abf3b4db11448c112f4ec5003c997cec9f4b83324a7145373fde865ba
c997cec9f4b83324a7145373fde865ba
c997cec9f4b83324a7145373fde865ba   
b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5f16b1740fad44fb09bfe928bcc527e08
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
d98514c50d29377bc85447c75d61145b
97c60cc767f916e8f625156e70c5b9c7
function Select(id,config){
 this.config = config||{};
 this.id = typeof(id)=='string'?document.getElementById(id):id;
 this.items = this.id.getElementsByTagName("li");
 this.selectClass = "select";
 this.selected = new Array();
 var _this = this;
 this.selectOpt = function(value,opt){
  var exist = false;
  for(var i=0;i5b00aaf6992cb1b7e6bd72f0335af378-1 && _this.items[i].className==""){
    _this.items[i].className=_this.selectClass;
   }
   //如果有样式中定义了默认
   if(_this.items[i].className==_this.selectClass){
    _this.selectOpt(_this.items[i].getAttribute('dataValue'),"add");
   }
   //加点单击事件
   _this.items[i].onclick=function(){
    //是否为单选
    var radio = _this.config.Raido?_this.config.Raido:true;
    if(_this.config.Radio==null || _this.config.Radio){
     if(this.className!=_this.selectClass){
      var items = this.parentNode.getElementsByTagName("li");
      for(var i=0;iacaaba77d928d6a460bc6abeb310d345=Max){
       alert("最多只能选择" Max "项");
      }else{
       this.className=_this.selectClass;
       _this.selectOpt(this.getAttribute('dataValue'),"add");
      }
     }
    }
    //去掉那个虚线框
    this.firstChild.blur();
    //调用回调函数
    if(_this.config.OnClick)_this.config.OnClick.call(this,_this.selected);
    return false;
   }
  }
 })(_this); 
}
2cacc6d41bbb37262a98f745aa00fbf0

The poster said: Do the effects of a:hover overlap?

<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="http://www.heredc.com/js/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript" src="http://www.heredc.com/js/jquery.min.js"></script><!--这里是内容B的--><script type="text/javascript"> function selectTag(showContent,selfObj){var tag = document.getElementById("tags").getElementsByTagName("li");var taglength = tag.length;for(i=0; i<taglength; i++){tag[i].className = "";}selfObj.parentNode.className = "selectTag";for(i=0; j=document.getElementById("tagContent"+i); i++){j.style.display = "none";}document.getElementById(showContent).style.display = "block";}</script><style type="text/css">ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p,input,li{ padding:0; margin:0;}ul,li{list-style-type:none;}img { border:0;}.clear{clear:both;line-height:1px;}#con { margin:20px auto;}#tags {width: 750px; height: 27px;position:relative;bottom:-3px;}/* 切换风格start*/#tags LI {background: url(http://www.heredc.com/js/tab/tab_bg_left_02.gif) no-repeat left bottom; float: left; margin-right: 1px; margin-right: 6px;list-style:none; height: 24px}#tags LI A {padding:0 20px 0 20px;background: url(http://www.heredc.com/js/tab/tab_right_02.gif) no-repeat right bottom; float: left;color: #000;  line-height: 24px;height: 24px; text-decoration: none;}/* 切换风格end*/#tags LI.emptyTag {background: none transparent scroll repeat 0% 0%; width: 4px;}#tags LI.selectTag {background-position: left top; margin-bottom: -2px; position: relative;top:-2px; height: 27px;}#tags LI.selectTag A {padding:0 20px 0 20px;background-position: right top; font-size:14px;color: #fff;font-weight:bold; line-height: 25px; height: 27px;}#tags LI A p{position:relative;top:2px;}#tagContent {border-top: #fa4e86 2px solid;}/*粉色02*/.tagContent { display: none;}#tagContent DIV.selectTag {display: block;}</style><!--这里是内容A的--><script type="text/javascript">window.onload=function(){ var size = new Select("size",{ Radio :true , OnClick:function(selected){ document.form.size.value = selected.join(",") document.form.color.value='';}});}</script><style type="text/css">ul{list-style-type:none;}ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}.test a:hover{border:2px solid #FF6701;margin:0px;}.select{}.select a{border:2px solid #FF6701;margin:0px;background:url(http://www.heredc.com/js/2010083011191628.gif) no-repeat no-repeat right bottom;}</style><!--这个JS是内容B的--><script type="text/javascript">$(function() {$('#tabs').tabs();});</script>  </head><body><table border="0" cellpadding="0" cellspacing="0" width="100%" id="table22"><tr><td><!--内容A--><ul id="size" class="test"><li dataValue="1"><a href="javascript:void(0)" onclick="Rchange(1,'myys')">S</a></li><li dataValue="2"><a href="javascript:void(0)" onclick="Rchange(2,'myys')">X</a></li><li dataValue="3"><a href="javascript:void(0)" onclick="Rchange(3,'myys')">XL</a></li></ul><br><br><!--内容B--><DIV id="con"><UL id="tags">  <LI class="selectTag"><A onClick="selectTag('tagContent0',this)" onFocus="this.blur()" href="javascript:void(0)"><p>商品介绍</p></A></LI><LI><A onClick="selectTag('tagContent1',this)" onFocus="this.blur()" href="javascript:void(0)"><p>评价详情(<font color="#0066FF">0</font>)</p></A></LI><LI><A onClick="selectTag('tagContent2',this)" onFocus="this.blur()" href="javascript:void(0)"><p>成交记录(<font color="#0066FF">50</font>)</p></A></LI></UL><DIV id="tagContent">  <DIV class="tagContent selectTag" id="tagContent0">001</DIV><DIV class="tagContent " id="tagContent1">002</DIV><DIV class="tagContent " id="tagContent2">003</DIV></DIV></DIV>   </td></tr></table></body></html><!--这个JS是内容A的--><script language="javascript" type="text/javascript">function Select(id,config){ this.config = config||{}; this.id = typeof(id)=='string'?document.getElementById(id):id; this.items = this.id.getElementsByTagName("li"); this.selectClass = "select"; this.selected = new Array(); var _this = this; this.selectOpt = function(value,opt){  var exist = false;  for(var i=0;i<_this.selected.length;i++){  if(_this.selected[i]==value){  exist = true ;  if(opt=="remove"){ _this.selected.splice(i,1);}  break;  }  }  if(!exist && opt=="add"){_this.selected.push(value);} }; //初始化对象 (function(_this){  //是否有默认配置的选择项  if(_this.config.Default){  var arr = _this.config.Default.split(",");  for(var i=0;i<arr.length;i++)_this.selectOpt(arr[i],"add");  }  for(var i=0;i<_this.items.length;i++){  //将defalut中配置的项加上样式  if( _this.selected.join(",").indexOf(_this.items[i].getAttribute('dataValue'))>-1 && _this.items[i].className==""){  _this.items[i].className=_this.selectClass;  }  //如果有样式中定义了默认  if(_this.items[i].className==_this.selectClass){  _this.selectOpt(_this.items[i].getAttribute('dataValue'),"add");  }  //加点单击事件  _this.items[i].onclick=function(){  //是否为单选  var radio = _this.config.Raido?_this.config.Raido:true;  if(_this.config.Radio==null || _this.config.Radio){  if(this.className!=_this.selectClass){  var items = this.parentNode.getElementsByTagName("li");  for(var i=0;i<items.length;i++){  items[i].className="";  }  _this.selected.length = 0;  _this.selected.push(this.getAttribute('dataValue'));  this.className=_this.selectClass;  }  }else{  var Max = _this.config.Max?_this.config.Max:1;  if(this.className==_this.selectClass){  this.className="";  _this.selectOpt(this.getAttribute('dataValue'),"remove");  }else{  if(_this.selected.length>=Max){  alert("最多只能选择"+Max+"项");  }else{  this.className=_this.selectClass;  _this.selectOpt(this.getAttribute('dataValue'),"add");  }  }  }  //去掉那个虚线框  this.firstChild.blur();  //调用回调函数  if(_this.config.OnClick)_this.config.OnClick.call(this,_this.selected);  return false;  }  } })(_this);  }</script>

@calmcrime
That’s right. The styles of content A and content B overlap. What I want to achieve is: content A uses the style of content A, and content B uses the style of content B without interfering with each other. Thank you

Because the style of content A is more important, I hope you can help me modify the style of content B instead of modifying the style of A. Thank you

Does it mean the third floor?

Does it mean the third floor?
Hero, I left a message for you, please take a look, or add me QQ 77644278, it may be clearer to take a screenshot in QQ for you, thank you!

@calmcrime
Hero, or you can make the code into an HTML file and you can see what is going on.

If you have any questions, just ask here and post a screenshot

@calmcrime
Hero, let me give you a link to make it more intuitive
http: //www.heredc.com/js/a.htm

Re-specify style 2:
border:0px;
No?

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn