CSS Select only List after 1st layer
Given
<ul class="menu">
<li> <!-- layer1 -->
<a href="/gbcweb/index.php?option开发者_如何转开发=com_content&view=article&id=19&Itemid=27">
<span>sub menu</span>
</a>
<ul>
<li><!-- layer2 -->
<a href="/gbcweb/index.php?option=com_content&view=article&id=22&Itemid=34">
<span>sub menu1</span>
</a>
<ul>
<li><!-- layer3 -->
<a href="/gbcweb/index.php?option=com_content&view=article&id=22&Itemid=34">
<span>sub menu2</span>
</a>
<!-- Continue layering -->
</li>
</ul>
</li>
</ul>
</li><ul>
How do I select all the from layer 2 onwards?And set a background image to all sub menu.
ul li li {
background-image: url(smotheing.jpg);
}
There is also the >
operator that is meant to select only the immediate children of the element before it.
For instance, if I had a multiple-level list like you do, I could write the following:
ul li {
/* normal list styles */
}
ul > li {
/* style to apply ONLY to first-level <li> tags */
}
ul > li > ul > li {
/* style to apply ONLY to second-level <li> tags */
}
ul > li li {
/* style to apply to everything BELOW the first level */
}
Try .menu ul li{}
精彩评论