撇开 a：first-child 还是撇开：first-child a？

Question

我正在创建一个侧边栏，我需要使用第一个子项来删除文本装饰，但我不知道处理它的正确方法是什么，这是一个 html 代码示例：

<aside>
    <nav>
         <div id="guide-item" class="content"> <a href="#">Início</a> </div>
         <div class="horizontalLine"></div>
         <div id="guide-item" class="content"> <a href="#">Notícias</a> </div>
         <div id="guide-item" class="content"> <a href="#">Vídeos</a> </div>
         <div class="horizontalLine"></div>
     </nav>
</aside>

效果类似于 Google+ 导航栏。这是一个css代码示例：

/* Left Sidebar */

aside {
    float: left; position: fixed;
    margin-top: 50px;
    background: #ffffff;
    height: 100%; width: 230px;
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.06);                   /* Inner shadow, rgba values can not be separated from his parent. The last value is a alpha parameter. */
    z-index: 1;
}


aside a:first-child {                                          /* Main navigation links (aside nav a {}). This way you can have 2 different styles inside the nav element. */
    text-decoration: none;                                      /* O first-child deixou de funcionar quando troquei a ordem no html  mas aside a:first-child e nth:child já funcionam. */
    color: inherit;
}


#guide-item.content {                                           /* Ao ter a div antes da classe posso reaproveitar a classe e criar algo mais dinamico. */
    padding: 13px 22px;
}

.content:hover {                                                /* Ao substituir a div pela classe passo a deixar de precisar de criar mais divs para o mesmo efeito. */
    background: #f5f5f5;
}

.horizontalLine {                                               /* Linha horizontal estilizada para substituir a tag tradicional, <hr>. */
    border-bottom: 1px solid #e5e5e5;
}

请记住，我是编程新手，而且我还是个青少年。感谢您抽出宝贵时间阅读本文。

Answer 1

试试这个：

aside nav div:first-child a {
  text-decoration: none;
  color: inherit;
}

这里是 DEMO