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

各位大侠，以下虽然定义了两个样式，但样式二却包含了样式一了，也就是样式二的那个

除了执行样式二之外，还同时执行了样式一，我想让他们两个独立，不相互包容，怎么改呢？
样式一图
样式二图


样式一：不修改这里





• 红色




---------------------------------------------------------------------------------------------
样式二：这里跟上面重复样式，如何修改








• 商品介绍




• 评价详情




• 成交记录







1


2


3









Reply to discussion (solution)

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











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


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





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



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



$(function() {
$('#tabs').tabs();
});
 








• S


• X


• XL















    

• 商品介绍




• 评价详情(0)

• 成交记录(50)






    
001


002


003




   





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   }
  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[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); 
}


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?