Question

我有一个内部有两个UL的div。我想将list-style：none应用于第一个UL的LI元素（它只有一个）。

但是，当我尝试这样做时，它也适用于第二个UL。请帮忙！

＆＃13;

div.com-amazon-webstore-LeftNavBrowse-2 ul:nth-child(1) li {
  list-style: none!important;
}
div.com-amazon-webstore-LeftNavBrowse-2 ul.linkList.browseLadder li {
  list-style: initial;
}

＆＃13;

<div class="com-amazon-webstore-LeftNavBrowse-2">
  <ul class="linkList browseLadder">
    <li> <a href="http://www.test.com/b/class=tier1&amp;ie=UTF8">
                  Products
                </a> 
    </li>
    <ul class="linkList browseLadder">
      <li> <span class="current"> Hot &amp; Cold Therapy</span> 
      </li>
      <li> <a href="http://www.test.com/b/6831886011">
                      PT &amp; Chiro Supplies
                    </a> 
      </li>
      <li> <a href="http://www.test.com/b/6831888011">
                      Massage Products
                    </a> 
      </li>
      <li> <a href="http://www.test.com/b/6831889011">
                      Exercise &amp; Fitness
                    </a> 
      </li>
      <li> <a href="http://www.test.com/b/6831890011">
                      Pain Relief Gels
                    </a> 
      </li>
      <li> <a href="http://www.test.comb/6831891011">
                      Rehabilitative Care
                    </a> 
      </li>
      <li> <a href="http://www.test.com/b/6831893011">
                      Footcare
                    </a> 
      </li>
      <li> <a href="http://www.test.com/b/6831894011">
                      Hand Therapy
                    </a> 
      </li>
    </ul>
  </ul>
</div>

＆＃13;

Answer 1

你的第二个列表位于第一个没有使它成为div的直接子节点的列表中。所以你可以直接选择第一个列表。

.com-amazon-webstore-LeftNavBrowse-2 > ul > li

对于第二个列表，您可以使用选择器

.com-amazon-webstore-LeftNavBrowse-2 > ul > li

.com-amazon-webstore-LeftNavBrowse-2 > ul > li {
                   background-color:gray;
                 }

                 .com-amazon-webstore-LeftNavBrowse-2 > ul > ul > li {
                   background-color:green;
                 }

<div class="com-amazon-webstore-LeftNavBrowse-2">
                  <ul class="linkList browseLadder">
                      <li> <a href="http://www.test.com/b/class=tier1&amp;ie=UTF8">
                          Products
                        </a> </li>
                      <ul class="linkList browseLadder">
                          <li> <span class="current"> Hot &amp; Cold Therapy</span> </li>
                          <li> <a href="http://www.test.com/b/6831886011">
                              PT &amp; Chiro Supplies
                            </a> </li>
                          <li> <a href="http://www.test.com/b/6831888011">
                              Massage Products
                            </a> </li>
                          <li> <a href="http://www.test.com/b/6831889011">
                              Exercise &amp; Fitness
                            </a> </li>
                          <li> <a href="http://www.test.com/b/6831890011">
                              Pain Relief Gels
                            </a> </li>
                          <li> <a href="http://www.test.comb/6831891011">
                              Rehabilitative Care
                            </a> </li>
                          <li> <a href="http://www.test.com/b/6831893011">
                              Footcare
                            </a> </li>
                          <li> <a href="http://www.test.com/b/6831894011">
                              Hand Therapy
                            </a> </li>
                      </ul>
                  </ul>
              </div>

您可以将背景颜色cjange到任何你想要的颜色。

Answer 2

div ul:first-child li {
    list-style: none;}

将div中的特定ul定位为list-style：none to

2 个答案: