css父层和子层覆盖的问题

html-css05

css父层和子层覆盖的问题,第1张

<html>

<head>

<style type="text/css">

.tree{

 background-color:red

}

.node{

background:gray

}

.tree .node{

background-color:yellow

}

</style>

</head>

<body>

        <div class="tree">

                <div class="node">node</div>

        </div>

        <div class="tree">tree</div>

        <div class="node">single node</div>

</body>

</head>

    `

你这么写就是可以:

就是稍微改动一下:

.tree .node{

}

这个点. 一定要加。不然会当成一个节点,你的这个是没有<node></node>的。希望你能理解!

<!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=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

body,td,th {

font-size: 12px

}

body {

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

}

.div{ width:200pxheight:200pxbackground:#FF0000}

.div ul{ list-style-type:nonepadding:0pxmargin:0}

.div ul li{ list-style-type:nonepadding:0pxmargin:0}

#apiv{

width:200px

height:200px

position:absolute

background:#0000FF

top: 1px

z-index:9

display:none/*将这个地方去掉这可将原来的层遮住*/

}

-->

</style></head>

<body>

<div class="div">

<ul>

<li>111111111111</li>

<li>222222222222</li>

<li>333333333333</li>

</ul>

<div id="apiv"></div>

</div>

</body>

</html>

--------------------------------

大概的就是这样了!改改就可以达到你想要的效果了!

这样类似的效果一般用在ajax中!