Question

在几乎练习了24小时后，我似乎无法将它放在我的大脑上。我需要帮助将按钮文字颜色更改为白色，而其余颜色保持相同颜色

＆＃13;

//NAVIGATION
//========================

.nav ul
  display: flex
  padding-left: 0
  padding-top: 15px

.nav li
  list-style: none
  padding: 10px

.nav ul li a
  text-decoration: none
  color: #000000

.nav ul li:last-child
  color: #FFFFFF

.nav ul li a:hover
  color: #5c6ac4

.nav li:not(:last-child)
  margin-right: 20px

.nav li:nth-child(3)
  margin-right: auto

//BUTTON
//==============

.btn
  width: 160px
  height: 20px
  //border: 1px solid #5c6ac4
  background: #5c6ac4
  border-radius: 5px
  box-shadow: 0 0 20px rgba(0,0,0,0.2)
  padding: 10px 15px 10px 15px

.btn:hover
  background: #212b35
  transition: background-color .6s ease-out

＆＃13;

<nav class="nav">
          <ul>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Get started</a></li>
            <li><a href="#" class="btn">Hire me</a></li>
          </ul>
        </nav>

＆＃13;

I've prepared an image on my particular issue

Answer 1

在css文件中将color: white;添加到.btn {..}（css中的评论为/* comment */：

＆＃13;

.btn {
  color: white;
  width: 160px;
  height: 20px;
  /* border: 1px solid #5c6ac4; */
  background: #5c6ac4;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  padding: 10px 15px 10px 15px;
}

＆＃13;

Answer 2

首先你不能像这样使用预处理器，你应该将它转换为CSS然后使用那个CSS，而CSS注释中的/*...*/和规则就像.btn{ key:value; }

所以在将你的sass转换成css后我们有：

/* Navigation */
.nav ul {
  display: flex;
  padding-left: 0;
  padding-top: 15px;
}
.nav li {
  list-style: none;
  padding: 10px;
}
.nav ul li a {
  text-decoration: none;
  color: #000000;
}
.nav ul li:last-child {
  color: #FFFFFF;
}
.nav ul li a:hover {
  color: #5c6ac4;
}
.nav li:not(:last-child) {
  margin-right: 20px;
}
.nav li:nth-child(3) {
  margin-right: auto;
}
/* Button */
.btn:hover {
  background: #212b35;
  transition: background-color .6s ease-out;
}

a.btn {
  width: 160px;
  height: 20px;
  /*border: 1px solid #5c6ac4;*/
  background: #5c6ac4;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  padding: 10px 15px 10px 15px;
}

<nav class="nav">
  <ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get started</a></li>
    <li><a href="#" class="btn">Hire me</a></li>
  </ul>
</nav>

按钮文字颜色

2 个答案: