在嵌套在div里面的css不起作用

html-css013

在嵌套在div里面的css不起作用,第1张

蓝色边框是父级div吗 加几个css属性overflow:hidden; height:auto;试试,可能是你子级元素使用了浮动float导致父级元素高度失效,并非css不起作用。

有两种可能

第一个、添加了行内样式,如果标签内添加了行内样式的css内联或外联样式中的对应属性无效;

第二个、优先级即权重导致,内联样式>id选择器>类选择器>元素选择器

举例:

#box p span em{xxx}  100+1+1+1

#box .txt em{xxxxx}  100+10+1

<div id="box">

    <p class="txt">

        <em>文字</em>

    </p>

</div>

上面两个在具有相同样式的情况下只显示第二个里面的,第一个里面的相同样式无效

<style type="text/css">

#wen01 ol {/*大类列表样式设置*/

margin: 0px

padding: 0px

width: 675px

list-style-type: none

}

#wen01 ol li.lv1_nav {/*大类列表分项样式设置*/

margin: 0px

padding: 0px

float: left

width: 223px

border: 1px solid red

}

#wen01 ol li ul {/*小类列表样式设置*/

margin: 0px

padding: 0px

list-style-type: none

}

#wen01 ol li ul li {/*小类列表分项样式设置*/

margin: 0px

padding: 0px

float: left

}

</style>

<div id="wen01">

<ol>

<li class="lv1_nav">

<h4>国家</h4>

<ul>

<li>中国;</li>

<li>美国;</li>

<li>日本;</li>

<li>德国;</li>

<li>法国;</li>

<li>苏联;</li>

<li>越南;</li>

<li>巴西;</li>

</ul>

</li>

<li class="lv1_nav">

<h4>运动</h4>

<ul>

<li>足球;</li>

<li>篮球;</li>

<li>怕球;</li>

<li>羽毛球;</li>

<li>藤球;</li>

<li>水球;</li>

<li>棒球;</li>

<li>高尔夫球;</li>

</ul>

</li>

<li class="lv1_nav">

<h4>物品</h4>

<ul>

<li>电器;</li>

<li>家具;</li>

<li>椅子;</li>

<li>桌子;</li>

<li>电视;</li>

<li>电扇;</li>

<li>电脑;</li>

</ul>

</li>

</ol>

</div>

首先,你的代码有点乱呃。

然后是问题的答案:

问题就出在:

#wen01 ol li {/*大类列表分项样式设置*/

你这里是给ol下所有的li加入了属性,包括二级分类,“width: 225px”的属性也带给了二级分类的li,所以二级分类的宽度和一级分类一样宽了,自然就会被“撑”成了纵向排列。

解决办法:你只需要给一级分类赋予class名即可。