last-child 和 first-child 选择器不起作用答案

【问题标题】：last-child and first-child selectors are not workinglast-child 和 first-child 选择器不起作用
【发布时间】：2013-09-18 22:29:59
【问题描述】：

我正在构建一个导航栏。这就是我想要的；

将鼠标悬停在链接上时更改链接上的background-color。第一个和最后一个链接背景应该有圆角。

问题是要么所有链接都变成圆角，要么没有！

CSS

   nav {
       width:100%;
       line-height:2;
   }
   nav ul {
       list-style:none;
   }
   nav li a {
       text-decoration:none;
       color:white;
       float:left;
       width:90px;
       display:block;
       background-color:blue;
       padding-left:10px;
   }
   nav li a:first-child {
       border-radius:5px;
   }
   nav li a:last-child {
       border-radius:5px;
   }
   nav li a:hover {
       color:blue;
       background-color:white;
   }

HTML

<nav>
    <ul>
        <li><a href="#">Hem</a>
        </li>
        <li><a href="#">om oss</a>
        </li>
        <li><a href="#">hitta hit</a>
        </li>
        <li><a href="#">Kontakta</a>
        </li>
    </ul>
</nav>

【问题讨论】：

标签： css pseudo-class css-selectors

【解决方案1】：

你要找的是这样的东西吗？

http://jsfiddle.net/gespinha/mkDWj/2/

您应该在第一个和最后一个li 内触发a，而不是在li 元素内的第一个和最后一个a，因为所有li 只有一个@ 987654328@（自动成为它自己的第一个和最后一个。

您的另一个问题是 您将所有边框分配为具有相同的半径，而您只希望边缘边框具有半径值。

CSS

nav li:first-child a {
    border-radius:5px 0 0 5px;
}
nav li:last-child a {
    border-radius:0 5px 5px 0;
}

有关边界半径属性的更多详细信息，请查看此文档http://www.w3schools.com/cssref/css3_pr_border-radius.asp

【讨论】：

谢谢伙计。这正是我所追求的！