Question

目标是在CSS中使用悬停效果的圆形侧面导航。我使用nth-child来控制顶部和底部的边界半径。正如您将在小提琴上看到的那样，当您将鼠标悬停在第1个和第4个孩子之间的元素上时，您将获得nth-child（1）的半径设置。为什么呢？

我正在使用此标记：

HTML

    <ul id="side-nav">
     <a href="#/clients"> <li class="side-nav-item clients" id="link_clients">Clients</li></a>
      <a href="#/my-routines"><li class="side-nav-item rtemplates" id="link_routine_templates">Routines</li></a>
      <a href="#/exercises"><li class="side-nav-item exlib" id="link_exercise_library">Exercise Library</li></a>
      <a href="<?php echo BASE_URL; ?>ud/logout/"><li class="side-nav-item logout" id="link_log_out">Log Out</li></a>
    </ul>

CSS

#side-nav{
    border: 1px solid #D5D5D5;
    border-radius: 10px;
    padding: 0px !important;
    list-style-type: none;
}
.side-nav-item{
    padding: 10px;
    border-bottom: 1px solid #D5D5D5;
    border-radius: 0;
    margin: 0px !important;
    font-size: 16px;
    font-weight: bold;
}
.side-nav-item a{
    color: #808080;
}

.side-nav-item:hover{
    background: #D5D5D5;

}

.side-nav-item.active{
    background: #01bbea;
}

.side-nav-item.active {
    color: #fff;;
}

.side-nav-item:nth-child(4){
    border-bottom: 0px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.side-nav-item:nth-child(1){
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 1px solid #D5D5D5;
}

Answer 1

首先，将锚点作为列表的子节点是错误的。您的结构应该看起来像ul>li>a。

另一方面，nth-child()适用于元素，不适用于类选择器。即使不是这样，具有.side-nav-item类的元素也始终是其父亲的第一个元素，它始终是锚点。因此，如果nth-child()适用于类（事实并非如此），那么您的代码无论如何都无法工作。

因此，如果您将结构更改为：

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

哪个是有效的HTML，那么你可以用这种方式做你想要的事情：

li:nth-child(1) a {
  /* your stylings */
}

CSS - 出现在错误元素上的nth-child条件

1 个答案: