nth-type。 CSS選擇器

Question

   <style> 
      /* topnav and footer nav */ 
       #topnav ul{ 
        list-style-type: none; 
        text-align: left; 
        margin: 0; 
        padding-left: 0; 
        padding: 0; 
       } 
       #topnav li{ 
        list-style-type: none; 
        display: inline; 
        margin: 0; 
        padding: 0; 
       } 
       #topnav li ul{ 
        display: inline; 
        padding: 0; 
       } 

       #topnav .menu li a 
       { 
        color: white; 
        //background-color: red; 
        display: block; 
        float: left; 
        height: 31px; 
        color: white; 
        width: 125px; 
        text-decoration: none; 
        font: 15px arial bold; 
        font-style: italic; 
        line-height: 40px; 
        border-right: 1px solid black; 
        text-align: center; 
       } 
       #topnav a:nth-of-type(7) 
       { 
        color: red; 
       } 
      </style> 
      <div id="topnav" style="height: 36px;"> 
      <div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu"> 
      <li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-63"> 
      <a href=">Home</a></li> 
      <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"> 
      <a href="">About</a></li> 
      <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"> 
      <a href="">Repairs</a></li> 
      <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"> 
      <a href="">Door Openers</a></li> 
      <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"> 
      <a href="">Testimonials</a></li> 
      <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"> 
      <a href="">Contact Us</a></li> 
      <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"> 
      <a href="">Specials</a></li> 
      <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"> 
      <a href="">Blog</a></li> 
      </ul> 
      </div> 
      </div> 

我的目的是選擇菜單中第7個元素，並將字體顏色更改爲紅色。沒有任何事情發生，所有文字都保持白色有什麼方法可以更改CSS，以便內容爲「特殊」的元素爲紅色文本？

感謝您張貼...

Answer 1

嘗試

#topnav li:nth-of-type(7) a 
{ 
    color: red; 
} 

代替。