为什么不这样“>”直系后裔的CSS选择器的工作

Question

我想知道为什么“ - >”选择并不在这种情况下工作，下面

nav > ul > li > ul > li > a{ 
     color: red; 
    } 

，但它在这种情况下工作

nav > ul > li > ul > li > a.item{ 
     color: red; 
    } 

.a是li的直接后裔，为什么我必须指定类名。它不应该得到李的孩子吗？这是.a

我刚刚意识到，它的工作原理，如果我只是给你上面的信息，但如果我把上面的代码之前，我已经有的CSS的其余部分，只是把.a不起作用。这是为什么发生的

休息的CSS：

html{ 
     height: 100%; 
    } 
    body{ 
     background-image: repeating-linear-gradient(315deg, #ddd, #ddd 40px, #aaa 40px, #aaa 80px); 
     padding: 20px; 
     height: 100%; 
    } 
    nav{ 
     margin: 0 auto; 
     width: 960px; 
     font-family: sans-serif; 
     font-size: 0.6em; 
     background-color: rgb(86,86,86); 
     background-image: linear-gradient(bottom, rgb(75,75,75), rgb(86,86,86)); 
     border-radius: 4px; 
     box-shadow : 0 0 10px rgba(0,0,0,0.1), 0 -1.5em 0 rgba(0,0,0,0.1) inset, 0 1px 1px 1px rgba(0,0,0,0.1) inset; 
    } 
    nav > ul{ 
     padding: 0 10px; 
    } 

    nav > ul > li{ 
     display: inline-block; 
     vertical-align: top; 
     line-height: 3em; 
     width: 100px; 
     z-index: 2; 
     position: relative; 
     border-left: 1px solid #313131; 
     box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -1px 0 1px rgba(255, 255, 255, 0.1) inset; 
    } 
    nav > ul > li:nth-last-child(2){ 
     border-right: 1px solid #313131; 
    } 

    nav > ul > li > ul{ 
     position: absolute; 
     left: -1px; 
     top: 3em; 
     clip: rect(0,0,0,0); 
     opacity: 0; 
    } 

    nav .item{ 
     color: #fff; 
     text-shadow: 1px 1px 0 rgba(0,0,0,0.5); 
     text-decoration: none; 
     font-weight: bold; 
     text-transform: uppercase; 
     letter-spacing: 0.2em; 
     padding-left: 10px; 
     white-space: nowrap; 
     display: block; 
     cursor: pointer; 
    } 
    nav > ul > li > .item:hover + ul, 
    nav > ul > li > ul:hover { 
     clip: auto; 
     opacity: 1; 
    } 
    nav > ul > li > ul{ 
     padding: 0.7em 0px; 
     border-bottom-left-radius: 5px; 
     border-bottom-right-radius: 5px; 
     border-top: none; 
     background-color: rgb(117,189,70); 
     background-color: rgba(119,172,48, 0.8); 
     background-image: linear-gradient(left, rgba(117, 189, 70, 1), rgba(117,189,70,0.0)); 
    } 

HTML

<nav> 
    <ul> 
     <li data-section="about-me"> 
      <a href="#" class="item">About me</a> 
      <ul> 
       <li><a href="#" class="item">Early years</a></li> 
       <li><a href="#" class="item">First works</a></li> 
       <li><a href="#" class="item">Today and tomorrow</a></li> 
       <li class="cursor"><a href="#" class="item">back</a></li> 
      </ul> 
     </li> 

    </ul> 
</nav> 

Answer 1

发生了什么事是指定一个类名优先于后代选择那个CSS选择器。当您指定此选择...

nav > ul > li > ul > li > a 

它就会通过这一个覆盖...

nav .item 

，这就是为什么菜单项显示了其在白色的文字，因为类选择接管后裔优先选择。但是，当您指定以下nav .item声明这个选择......

nav > ul > li > ul > li > a.item 

要添加类选择哪个有效地覆盖了先前指定nav .item选择