在CSS中，当列表中有列表时，无法覆盖父列表样式 [英] In CSS, when I have lists within lists, I can't override the parent list style

问题描述

如果我有< ul>具有规则"list-style-type:none"(以及< li>项的规则"background-image:url(whatever.jpg)")的列表)，如果我看不到这些规则，有一个< ul>将< li>之一的子项列出项目.我想使子列表具有经典样式"list-style-type:disc"，但浏览器似乎忽略了这一点，因此我拥有用于​​子列表项的父列表项的背景图像相同./p>

这是HTML:

 < ul class ="blueArrow">< li>< ul>< li> ...</li>...</ul></li></ul>和CSS:ul.parentClass {list-style-type:无；边距:0;填充:0;左边距:1.076923076923077em;}ul.blueArrow li {padding-left:17px;行高:22px；垂直对齐:中间；职位:相对清楚:两者；显示:块；高度:22px；背景颜色:白色；背景:透明url(../images/arrowblue.png)不重复滚动0 3px；颜色:#086189;职位:相对}ul.blueArrow li ul {list-style-type:光盘；背景图片:无；} 

解决方案

请记住，最具描述性的选择器优先.

这将起作用:

  ul.blueArrow li ul，ul.blueArrow li ul li {list-style-type:光盘；背景图片:无；} 

以下是有关CSS选择器的W3指南: http://www.w3.org/TR/CSS2/selector.html

If I have a <ul> list that has the rule "list-style-type: none" (and the rule "background-image: url(whatever.jpg)" for the <li> items), I can't seem to override those rules if I have a <ul> list as a child of one of the <li> items. I want to make the child list have the classic style "list-style-type: disc", but the browser seems to ignore that, so that I have the same background image of the parent list items used for the child list items.

Here's the HTML:

<ul class="blueArrow">    
    <li>
        <ul>
            <li>...</li>   
            ...
        </ul>
     </li>
</ul>

And the CSS:

ul.parentClass {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 1.076923076923077em;
}

ul.blueArrow li {
    padding-left: 17px;
    line-height: 22px;
    vertical-align: middle;
    position: relative;
    clear: both;
    display: block;
    height: 22px;
    background-color: white;
background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
    color: #086189;
    position: relative;
}

ul.blueArrow li ul {
list-style-type: disc;
background-image: none;
}

解决方案

Remember that the most descriptive selector takes precedence.

This will work:

ul.blueArrow li ul, ul.blueArrow li ul li {
list-style-type: disc;
background-image: none;
}

Here is the W3 guide on CSS Selectors: http://www.w3.org/TR/CSS2/selector.html

这篇关于在CSS中，当列表中有列表时，无法覆盖父列表样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！