ホームページ >ウェブフロントエンド >htmlチュートリアル >ヒーローの皆様、以下では 2 つのスタイルが定義されていますが、スタイル 2 にはスタイル 1 が含まれています。modify_html/css_WEB-ITnose にご協力ください。

ヒーローの皆様、以下では 2 つのスタイルが定義されていますが、スタイル 2 にはスタイル 1 が含まれています。modify_html/css_WEB-ITnose にご協力ください。

WBOY
WBOYオリジナル
2016-06-24 12:11:46981ブラウズ

各位大侠,以下虽然定义了两个样式,但样式二却包含了样式一了,也就是样式二的那个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


ディスカッションに返信 (解決策)

クリック後の効果ですか、js はどこですか?投稿してください


100db36a723c770d327fc0aef2ce13b1

f52403626440f1fd31b80baf221b7118
f860775cd95e67ed8e16c79e5aa8ad2f
cdf027400af094a257da4d012195398d2cacc6d41bbb37262a98f745aa00fbf0
992b777ad06be615ce754715a00a0a0f2cacc6d41bbb37262a98f745aa00fbf0

baea18f6c2092bcf233ca96bb2d0ae50
4ec11beb6c39d0703d1751d203c17053
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 = "ブロック";
}
2cacc6d41bbb37262a98f745aa00fbf0
080b747a20f9163200dd0a7d304ba388
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 -左下を繰り返します。 フロート: 左; マージン右: 1px; margin-right: 6px;list-style:none; 高さ: 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; フロート: 左;カラー: #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; 位置: 相対;上:-2px; height: 27px;}
#tags LI.selectTag A {padding:0 20px 0 20px;background-position: right top; font-size:14px;color: #fff;font-weight:bold; 行の高さ: 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


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

080b747a20f9163200dd0a7d304ba388
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
4991f9dc60b431b8db01e6bdfad52492
4ec11beb6c39d0703d1751d203c17053
$(function() {
$('#tabs').tabs();
});
2cacc6d41bbb37262a98f745aa00fbf0 
9c3bca370b5104690d9ef395f2c5f8d1

2c0fa1135ca1cf8e44e5da7bd81dbcc2a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c
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
f08519287034b0cec880dfaad5ef7411
c816a7ba70fbc6b254eca2ce6ba0723a
function Select(id,config){
this.config = config||{};
this.id = typeof(id)=='string'?document.getElementById(id):id;
this.items = this.id.getElementsByTagName("li");
this.selectClass = 「選択」;
this.selected = 新しい Array();
var _this = this;
this.selectOpt = function(value,opt){
var exist = false;
for(var i=0;i<_this.selected.length> 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;i74b5c926f24e133c5a1e8c6991153530-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;i8a91425d5cb78ece35ba1c25b0f7fa25=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);
falseを返します。
}
}
})(_this); 
}
2cacc6d41bbb37262a98f745aa00fbf0

元の投稿者は次のように述べています: a:hover の効果は重複しますか?

<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
そうです。コンテンツ A とコンテンツ B のスタイルが重複していることを実現したいのですが、コンテンツ A はコンテンツ A のスタイルを使用し、コンテンツ B はコンテンツ B のスタイルを相互に干渉することなく使用します。ありがとうございます

コンテンツ A のスタイルの方が重要なので、A のスタイルを変更するのではなく、コンテンツ B のスタイルを変更することを手伝っていただければ幸いです。ありがとう

3 階のことですか?

3階ってことですか?
ヒーロー、私はあなたにメッセージを残しました。見てください。または QQ 77644278 に私を追加してください。QQ でスクリーンショットを撮ったほうがわかりやすいかもしれません。ありがとう!

@calmcrime
ヒーロー、またはコードを HTML ファイルに作成すると、何が起こっているかを確認できます。

質問がある場合は、ここに言ってスクリーンショットを投稿してください

@calmcrime
ヒーロー、より直感的に理解できるようにリンクを提供します
http://www.heredc.com/js/a。 htm

スタイル 2 を再指定します:
border:0px;
可能ではないでしょうか。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。