Question

考虑：

nav ul li .linav a:nth-child(1):before,
nav ul li .linav a:nth-child(1):after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, goldenrod, yellow);
  background-color: crimson;
}

nav ul li .linav a:nth-child(2):before,
nav ul li .linav a:nth-child(2):after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Navigation Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container">
      <nav>
        <h1 class="brand"><a class='nav' href="index1.html"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
        <ul class="ulnav">
          <li class="linav"><a class='nav' href="#">Social Links</a></li>
          <li class="linav"><a class='nav2' href="#">Programs</a></li>
          <li class="linav"><a class='nav3' href="#">Contact Me</a></li>
        </ul>
      </nav>
    </div>
    <p>
      Hey! Welcome to my website.<br> On here I have my social links and will be posting some of my html/css/javascript programs as well. Also this is my first website so please don't be too harsh about it. Thanks!
    </p>
  </header>
</body>

我无法使代码按我想要的方式工作。我希望每个n个孩子都有自己的颜色。我的目标是使to按钮具有不同的彩色线条。

Answer 1

nav ul li:nth-child(1) a:before,
nav ul li:nth-child(1) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, goldenrod, yellow);
  background-color: crimson;
 }
nav ul li:nth-child(2) a:before,
nav ul li:nth-child(2) a:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, darkred, #F80F01);
}

Answer 2

因为在您的HTML中，所有GetSystemTime()标签始终是a的第一个孩子。尝试将li放在:nth-child(1)中。

此外，我想指出CSS选择器中的li。这意味着您正在li .linav中选择.linav。它不应有空格（li），因此CSS会查找具有li.linav类的li。

.linav

为什么第n个孩子选择所有孩子？

2 个答案: