html - CSS - 第 n 个子条件出现在错误的元素上

Question

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

我正在使用这个标记:

http://jsfiddle.net/hKxt9/

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

首先，将 anchor 作为列表的子节点是错误的。您的结构应该类似于 ul>li>a。

另一方面，nth-child() 适用于元素，不适用于类选择器。即使不是这样，带有 .side-nav-item 类的元素始终是其父元素的第一个元素，它们始终是 anchor 。因此，如果 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 */
}