Question

到达下面突出显示的ul标记的选择器是什么？（没有类或id是可能的，我需要一个html标记的选择器）

这是我的HTML代码：

<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>

Answer 1

有许多方法可以设置这些无序列表的样式，具体取决于您希望选择器的具体位置。我在下面创建了一个有点全面的列表。

选择第一个ul：

的方法

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

选择第二个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

重要提示：确保第二个ul与第一个ul相比具体或更具体。ul。否则，第一个ul的样式将应用于第二个li ul { /* styles here */ } ul .current ul ul { /* styles here */ }。

例如，this would work：

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

ul ul {
    /* styles here */
}

但是this would NOT work：

{{1}}

Answer 2

第一个：

li.active ul

第二个：

li.active ul ul

http://jsfiddle.net/YYsZ3/

Css <ul>选择器</ul>

2 个答案: