-1

What is the selector to reach the ul markups highlighted below? (no class or id is possible i need a selector to the html markup)

Here is my html code:

<div id="mainmenu">
  <ul class="menu">
    <li class="item-472">
        <a href="#">Accueil</a>
    </li>
    <li class="item-475 current active deeper parent">
      <a href="#" class="drop">Produits</a>  
        **<ul> <!--Here is the first ul I'm tryin to style --> **  
            <li class="item-519 deeper parent" >
            <h3>Fenêtres</h3>
            <p>PVC</p>
            <a href="#">Fenêtres</a>
           ** <ul> <!-- the second ul to style -->**
                <li class="item-521 deeper parent">
                    <a href="#">PVC</a>
                    <ul >
                        <li class="item-522"><a href="#">Arcade</a></li>
                    </ul>
                </li>
            </ul>
            </li>
        </ul>
    </li>
4

2 回答 2

3

There are a number of ways to style these unordered lists, depending on how specific you want your selectors to be. I have created a somewhat comprehensive list below.

Ways to select the first ul:

  • ul
  • li ul
  • ul li ul
  • ul .item-475 ul
  • ul .current ul
  • ul .active ul
  • ul .deeper ul
  • ul .parent ul

Ways to select the second ul:

  • ul ul
  • li ul ul
  • ul li ul ul
  • ul .item-475 ul ul
  • ul .current ul ul
  • ul .active ul ul
  • ul .deeper ul ul
  • ul .parent ul ul

IMPORTANT: Be sure that the second ul is either as specific or more specific than the first ul. Otherwise, the style of the first ul will be applied to the second ul.

For example, this would work:

li ul {
    /* styles here */
}

ul .current ul ul {
    /* styles here */
}

But this would NOT work:

ul .current ul {
    /* styles here */
}

ul ul {
    /* styles here */
}
于 2013-02-17T00:56:33.097 回答
-1

first one: 

li.active ul

second one:

li.active ul ul

http://jsfiddle.net/YYsZ3/

于 2013-02-17T00:56:52.417 回答