ul li a影响ul li ul li a

Question

如果标题难以理解，请让我解释一下...

我有一个CSS / jQuery切换菜单。 当您按下“ +”号时，它变大；当您按下“-”号时，它变小。 我使多个元素的填充，边距和高度在切换/单击时发生了变化。 菜单顶部充满了链接，然后将鼠标悬停在链接上时，它将显示更多子链接。 顶部的主要链接使用CSS代码：

/*Top level menu link items style*/
.jquerycssmenu ul li a{
    display: block;
    background: none; /*background of tabs (default state)*/
    padding: 5px 18px 32px 18px;
    margin-right: 3px; /*spacing between tabs*/
    color:#fff;
    text-decoration: none;
}

子菜单使用以下CSS代码：

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
    font: normal 13px Verdana;
    width: 320px; /*width of sub menus*/
    height:60px;
    background: black;
    color: white;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid #2c2c2c;
    padding:20px 0px 0 20px;
}

我已经设置了JQuery，所以子菜单的填充通过切换来缩小...我这样做是这样的：

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "40px",
      padding: "10px 0px 0 20px"
    }, 100);
    $(this).text('+');
  },

  function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "60px",
      padding: "20px 0px 0 20px"
    }, 100);
    $(this).text('-');

  });
});

这工作得很好！ 然后，我尝试在JQuery中输入主菜单（.jquerycssmenu ul li a），如下所示：

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "40px",
      padding: "10px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      paddingBottom: "8px"
    }, 100);
    $(this).text('+');
  },

  function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "60px",
      padding: "20px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      paddingBottom: "32px"
    }, 100);
    $(this).text('-');

  });
}); 

由于某种原因， ul li a （主菜单）会影响ul li ul li a （ ul li ul li a ）子菜单（子菜单）。 当您切换菜单时， padding-bottom的子菜单是主菜单相同.. 32px时更大， 8px时小。当padding-bottom应该是0px时做大0px ，当上市小象以上。

为什么ul li a （主菜单链接）影响ul li ul li a （子菜单链接）？ 以及如何解决此CSS / JQuery问题，以使主菜单链接不会影响子菜单链接。

只是一个快速注： 我可以sucesfully编辑ul li a代码，而它影响ul li ul li a码。在CSS。 只是当我将代码应用于JQuery时，事情才变得混乱。

Answer 1

您应该使用此：

`.jquerycssmenu > ul > li > a`

代替这个：

`.jquerycssmenu ul li a` 

这是> css选择器的说明：
“>”（大于号）CSS选择器是什么意思？

Answer 2

选择ul li a任何匹配<a>标签在任何深度在一个<li>标签的<ul>标签-即使，例如， <li>实际上是一个内<ol>标记，是外内<ul> ：

<ul>
    <li>
        <ol>
            <li><a>Foo</a></li>
        </ol>
    </li>
</ul>

选择器ul li对此标记有两个匹配项，因为该<ul>有两个<li>标签。 但是，要仅选择直接子级，可以使用> ，即ul > li将仅选择第一个<li>元素，而不选择第二个，因为该元素不是<ul>的直接子级。

Answer 3

p span意味着寻找一个span是位于一个内部元素p元素，无论它是直接后裔与否。

这就是为什么ul li a也影响像这样嵌套的a a原因： ul > li > ul > li > a 。

您应该使用子选择器ul > li > a 。

Answer 4

选择ul li a指“的a是一个的后代li是一个后裔ul ，不论何时， a有li和ul的祖先，它将应用。只选择直接的孩子，使用>操作符。因此.jquerycssmenu > ul > li > a和.jquerycssmenu > ul > li > ul > li > a或类似的东西。