<li <?php echo 'class="myclass"' ?>></li>
class和id一样是个选择器而已，通过定义样式后，被html的标签所调用来实现页面的排版、布局和样式。
<style>#nav{float:left}
/*id调用*/
.text{font-size:15px}
.text2{font-size:13px}
/*class调用*/
</style>
<body>
<div id="nav">
<p class="text">第一个文字</p>
<p class="text2">第二个文字</p>
</div>
<body>
其实没啥具体含义，举个例子来说吧，
比方说我捡到一个东西，我给他起个名字叫text，而这个东西的长相就是font-size:15px
后来我又捡到一个东西，给他起名叫text2，而这个东西的长相就是font-size:13px
一般情况下class定义的样式在同一文档中可以重复调用，而id只一次（我试验过也可以多次使用，不过有的浏览器会报错，而且这样做有悖常规，所以尽量不要把 id 定义的样式重复调用）。
希望这么讲你能明白
如果只是单纯的想防止背景色突出的话，没必要判断，会以hover的为主，不加!important的前提可以看下面的例子
1.定义了!important的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor {
background-color:#00CCCC !important
}
.hover {
background-color:#FF6600
}
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul li").hover(
function () {
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor")
},
function () {
$(this).removeClass("backcolor")
}
)
})
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
2.不定义!important的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor {
background-color:#00CCCC
}
.hover {
background-color:#FF6600
}
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul li").hover(
function () {
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor")
},
function () {
$(this).removeClass("backcolor")
}
)
})
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
3.加判断的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor {
background-color:#00CCCC
}
.hover {
background-color:#FF6600
}
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul li").hover(
function () {
if (!$(this).hasClass("hover"))
$(this).addClass("backcolor")
},
function () {
$(this).removeClass("backcolor")
}
)
})
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）