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

抛开：第一个孩子或旁边：第一个孩子？

1 个答案: