In CSS, when I have lists within lists, I can't override the parent list style
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 o开发者_如何学Pythonne 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
For the outer LI, define CSS as:
ul.blueArrow > li {
:
background: transparent url(../images/arrowblue.png) no-repeat scroll 0 3px;
:
}
This will apply to only those LI which are direct children of <ul class="blueArrow">
.
Then you won't need to add anything like ul.blueArrow li ul
ref: http://www.w3schools.com/css/css_reference.asp
You could do:
<ul class="blueArrow">
<li>
<ul>
<li>...</li>
...
</ul>
</li>
</ul>
ul.blueArrow
{
list-style-type: none;
background-image: url(whatever.jpg);
}
ul.blueArrow li ul
{
list-style-type: disc !important;
background-image: none !important;
}
You should use
ul.blueArrow li ul {
list-style-type: disc;
}
ul.blueArrow li li {
background-image: none;
}
since your CSS will not overwrite the li
's style.
精彩评论