Question

我正在一个小型网站上工作，我有一个边框半径设置为10px的菜单。我有问题如何使悬停使用border-radius只在第一个和最后一个孩子。有人可以解释一下我做错了什么吗？

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

CSS：

.menu ul
{
    background: #ede0b3;
    width: 200px;
    box-shadow: 1px 1px 1px 1px grey;
    border-radius: 10px; 
    margin-left: 5px;
} 

.menu ul li
{
    list-style: none;
    border-bottom: 1px solid grey;
}

.menu ul li a
{
    padding: 10px 15px;
    display: block;
    color: black;
    font-weight: bold;
    text-decoration: none; 
}

.menu ul li:last-child
{
    border-bottom: none;

}

.menu ul li a:hover
{
    background: white; 
}

.menu li a:first-child:hover
{
    border-radius: 10px;
}

演示：https://jsfiddle.net/vaydrvcr/

Answer 1

使用此方法

.menu ul
{
	background: #ccc;
	width: 200px;
	box-shadow: 1px 1px 1px 1px grey;
	border-radius: 10px; 
	margin-left: 5px;
} 

.menu ul li
{
	list-style: none;
	border-bottom: 1px solid grey;
}

.menu ul li a
{
	padding: 10px 15px;
	display: block;
	color: black;
	font-weight: bold;
	text-decoration: none; 
}

.menu ul li:last-child
{
	border-bottom: none;

}

.menu li:first-child a:hover{
	border-radius: 10px;
  background:#fff;
}

.menu li:last-child a:hover{
	border-radius: 10px;
  background:#fff;
}

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

块引用

Answer 2

试试这个，你必须定位li元素而不是a标记。

＆＃13;

.menu ul
{
	background: #ede0b3;
	width: 200px;
	box-shadow: 1px 1px 1px 1px grey;
	border-radius: 10px; 
	margin-left: 5px;
} 

.menu ul li
{
	list-style: none;
	border-bottom: 1px solid grey;
}

.menu ul li a
{
	padding: 10px 15px;
	display: block;
	color: black;
	font-weight: bold;
	text-decoration: none; 
}

.menu ul li:last-child
{
	border-bottom: none;

}

.menu li:first-child a:hover{
	border-radius: 10px;
  background:#fff;
}

.menu li:last-child a:hover{
	border-radius: 10px;
  background:#fff;
}

＆＃13;

<div class="menu">
      <ul>
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
        <li><a href="#">Link 5 </a></li>
      </ul>
    </div>

＆＃13;

Answer 3

你面临的问题是因为你有li-first-child的border-radius属性，因为每个li标签都有一个元素，这就是它影响整个元素的原因。

CSS

 .menu li:first-child:hover a
 {
    border-radius:10px;
 }

希望这可以解决您的问题.. https://jsfiddle.net/xdn80b9f/1/

Answer 4

你走了：

.menu ul {
  background: #ede0b3;
  width: 200px;
  box-shadow: 1px 1px 1px 1px grey;
  border-radius: 10px;
  margin-left: 5px;
  padding-left: 0;
}
.menu ul li {
  list-style: none;
  border-bottom: 1px solid grey;
}
.menu ul li a {
  padding: 10px 15px;
  display: block;
  color: black;
  font-weight: bold;
  text-decoration: none;
}
.menu ul li:last-child {
  border-bottom: none;
  border-top-left-radius: 0;
}
.menu ul li a:hover {
  background: white;
}
.menu li:first-child:hover a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu li:last-child:hover a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div class="menu">
  <ul>
    <li><a href="#">Link 1 </a>
    </li>
    <li><a href="#">Link 2 </a>
    </li>
    <li><a href="#">Link 3 </a>
    </li>
    <li><a href="#">Link 4 </a>
    </li>
    <li><a href="#">Link 5 </a>
    </li>
  </ul>
</div>

首先我将padding-left: 0;添加到.menu ul选择器，然后将最后一个样式.menu li a:first-child:hover替换为仅添加左上角＆amp;第一个菜单项的右上边框和左下角的＆amp;最后一项的右下边框：

.menu li:first-child:hover a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu li:last-child:hover a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Answer 5

这里是更新的小提琴。 https://jsfiddle.net/vaydrvcr/1/

你是对的，只是你错过了a永远是li的第一个孩子。你是第一个目标的锚。

如何使用border-radius first-child

5 个答案: