:first-child border-top-right-radius 不起作用答案

【问题标题】：:first-child border-top-right-radius wont work:first-child border-top-right-radius 不起作用
【发布时间】：2015-01-17 20:14:41
【问题描述】：

我想创建一个导航，导航的第一个子节点应该有一个边框半径。此代码不起作用 border-top-left-radius: 10px;

*{
    margin: 0px;
    padding: 0px;
}


nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}
nav ul {
    list-style: none;
}

nav ul li{
    background-color: #D7E8D5;
}

nav ul li:first-child{
    border-top-left-radius: 10px;
}
    
nav ul a {
    display: block;
    padding: 10px 20px;
    color: #4A3A47;
    text-decoration: none;
}

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        
        <nav>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
            </ul>
        </nav>

    </body>
</html>

.................................................. ..................................................... ..................................................... .......

【问题讨论】：

标签： html css

【解决方案1】：

您的代码有效，但您将相同的背景颜色添加到 nav 元素，因此您看不到它。只需改变这个：

nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

到这里：

nav {
    position: fixed;
    background: transparent; /* or just get rid of this line */
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

【讨论】：

【解决方案2】：

问题是您将相同的background-color 应用于nav，因此即使将border-top-left-radius 应用于第一个li，您也不会看到任何更改。

从nav 中删除background-color: #D7E8D5;。

注意：我已删除 margin-left: -600px 以保留 nav。

* {
  margin: 0px;
  padding: 0px;
}
nav {
  position: fixed;
  left: 50%;
  margin-left: 0px;
  top: 100px;
}
nav ul {
  list-style: none;
}
nav ul li {
  background-color: #D7E8D5;
}
nav ul li:first-child {
  border-top-left-radius: 10px;
}
nav ul a {
  display: block;
  padding: 10px 20px;
  color: #4A3A47;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
  </ul>
</nav>

【讨论】：