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

html-css08

在嵌套在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名即可。